Source file skyline_card_v2.ml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
open! Core
open! Private_skyline_prelude

module Style = struct
  let to_padding = function
    | `Xs -> Classes.p 1.
    | `Sm -> Classes.p 2.
    | `Md -> Classes.p 3.
    | `Lg -> Classes.p 4.
  ;;

  let to_style size =
    let base = Attr.many Classes.[ text_default ] in
    let rounded_attr =
      match size with
      | `Xs -> Classes.rounded_xs
      | `Sm -> Classes.rounded_sm
      | `Md -> Classes.rounded_md
      | `Lg -> Classes.rounded_lg
    in
    Attr.many [ base; rounded_attr ]
  ;;

  let full_bleed = {%css|display: contents;|}
end

module Elevation = struct
  type t =
    | Zero
    | One
    | Two
    | Three
    | Four
  [@@deriving sexp, equal, enumerate, to_string]

  let to_style t =
    let border_style = Classes.[ border 1; border_default ] in
    let style =
      match t with
      | Zero -> []
      | One -> border_style
      | Two -> Classes.shadow_sm :: border_style
      | Three -> Classes.shadow_md :: border_style
      | Four -> Classes.shadow_lg :: border_style
    in
    Attr.many style
  ;;
end

module Surface_color = struct
  type t =
    | One
    | Two
    | Three
  [@@deriving sexp, equal, enumerate, to_string]

  let to_style = function
    | One -> Classes.bg_one
    | Two -> Classes.bg_two
    | Three -> Classes.bg_three
  ;;
end

module Content = struct
  type t = size:Skyline_size.t -> Node.t
end

let view
  ?test_selector
  ?(attrs = [])
  ?(size = `Md)
  ?(elevation = Elevation.One)
  ?(surface_color = Surface_color.One)
  children
  =
  let attrs =
    [ Test_selector.attr_of_opt test_selector
    ; Style.to_style size
    ; Elevation.to_style elevation
    ; Surface_color.to_style surface_color
    ; Classes.data_skyline_component "card"
    ; Attr.many attrs
    ]
  in
  Node.div ~attrs (List.map children ~f:(fun content -> content ~size))
;;

module Section = struct
  let content ?test_selector ?(full_bleed = false) ?(attrs = []) children ~size =
    let attrs =
      Test_selector.attr_of_opt test_selector
      :: (if full_bleed then Style.full_bleed else Style.to_padding size)
      :: attrs
    in
    Node.div ~attrs children
  ;;

  let text ?test_selector ?full_bleed ?attrs children ~size =
    Skyline_text_v2.view
      ~size:(size :> Skyline_text_v2.Size.t)
      ~layout:`Contents
      [ content ?test_selector ?full_bleed ?attrs children ~size ]
  ;;

  let title ?test_selector ?full_bleed ?(attrs = []) children ~size =
    Skyline_text_v2.view
      ~size:(size :> Skyline_text_v2.Size.t)
      ~weight:`Bold
      ~layout:`Contents
      [ content ?test_selector ?full_bleed ~attrs:(Classes.pb 0. :: attrs) children ~size
      ]
  ;;
end

module For_docs = struct
  let ml_filepath = [%here].pos_fname
end