In the beginning there was darkness
This commit is contained in:
commit
11018f613b
|
@ -0,0 +1,6 @@
|
||||||
|
*.js
|
||||||
|
.nrepl-port
|
||||||
|
.shadow-cljs
|
||||||
|
.cpcache
|
||||||
|
resources/public/js
|
||||||
|
node_modules
|
|
@ -0,0 +1,134 @@
|
||||||
|
:toc:
|
||||||
|
:toc-placement: preamble
|
||||||
|
:toc-levels: 2
|
||||||
|
|
||||||
|
= Fulcro 3 Carbon Wrappers
|
||||||
|
|
||||||
|
Fulcro 3 convenience wrappers for using https://react.carbondesignsystem.com[Carbon Design System] components.
|
||||||
|
|
||||||
|
This library offers improved integration with the carbon design system packages with predefined
|
||||||
|
factories and doc strings generated directly from the Carbon source. It also includes symbols for
|
||||||
|
all icon names.
|
||||||
|
|
||||||
|
NOTE: This library requires that you use Fulcro 3 and Shadow CLJS as the compiler.
|
||||||
|
|
||||||
|
image::https://img.shields.io/clojars/v/ch.lyrion/carbon-wrapper.svg[link="https://clojars.org/ch.lyrion/carbon-wrapper"]
|
||||||
|
|
||||||
|
== Usage
|
||||||
|
|
||||||
|
Shadow-cljs has much better integration with the NPM ecosystem, which allows you to
|
||||||
|
easily upgrade your carbon dependency without worrying about cljsjs, and also
|
||||||
|
allows you to easily use individual components for a smaller build size. Simply add
|
||||||
|
the carbon components to your `package.json`:
|
||||||
|
|
||||||
|
```
|
||||||
|
$ npm install --save-dev carbon-components-react carbon-components carbon-icons
|
||||||
|
```
|
||||||
|
|
||||||
|
=== Using Components
|
||||||
|
|
||||||
|
Individual factories can be found in namespaces that mirror the carbon-react module structure:
|
||||||
|
|
||||||
|
e.g. `Grid > Row` is available as
|
||||||
|
```
|
||||||
|
(:require [ch.lyrion.carbon.grid.ui-row :refer [ui-row]])
|
||||||
|
```
|
||||||
|
|
||||||
|
and `Accordion > Accordion` is available as
|
||||||
|
```
|
||||||
|
(:require [ch.lyrion.carbon.accordion.ui-accordion :refer [ui-accordion]])
|
||||||
|
```
|
||||||
|
|
||||||
|
While this is a bit tedious in the requires, it ensures that you don't get components in your
|
||||||
|
build that you don't use.
|
||||||
|
|
||||||
|
== Porting from Carbon React Documentation Examples
|
||||||
|
|
||||||
|
Props are required. The factories will convert them to js for you, but if you want every ounce of
|
||||||
|
possible speed you can pre-tag your props with `#js`.
|
||||||
|
|
||||||
|
React Version:
|
||||||
|
```
|
||||||
|
<Breadcrumb
|
||||||
|
className="some-class"
|
||||||
|
noTrailingSlash
|
||||||
|
onClick={function noRefCheck(){}}
|
||||||
|
>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<a href="/#">
|
||||||
|
Breadcrumb 1
|
||||||
|
</a>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbItem href="#">
|
||||||
|
Breadcrumb 2
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbItem
|
||||||
|
aria-current="page"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Breadcrumb 3
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</Breadcrumb>
|
||||||
|
```
|
||||||
|
|
||||||
|
This library:
|
||||||
|
|
||||||
|
```
|
||||||
|
(ui-breadcrumb
|
||||||
|
{:className "some-class"
|
||||||
|
:noTrailingSlash true
|
||||||
|
:onClick (fn [] nil)
|
||||||
|
:children [
|
||||||
|
(ui-breadcrumb-item
|
||||||
|
(dom/a {:href "/#"} "Breadcrumb 1"))
|
||||||
|
(ui-breadcrumb-item
|
||||||
|
"Breadcrumb 2")
|
||||||
|
(ui-breadcrumb-item
|
||||||
|
{:aria-current "page"
|
||||||
|
:href "#"}
|
||||||
|
"Breadcrumb 3")
|
||||||
|
]})
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
== Examples
|
||||||
|
|
||||||
|
You can see some example usage in the workspaces of this repository. To play with them live
|
||||||
|
clone this repo, and start the compiler:
|
||||||
|
|
||||||
|
```
|
||||||
|
cd carbon-wrapper
|
||||||
|
npm install
|
||||||
|
npx shadow-cljs server
|
||||||
|
```
|
||||||
|
Navigate to http://localhost:9000 and start the workspaces build
|
||||||
|
|
||||||
|
Then navigate to http://localhost:8023
|
||||||
|
|
||||||
|
== Regenerating Factories
|
||||||
|
|
||||||
|
The factory files are generated from a checkout of the (https://github.com/carbon-design-system/carbon)[Carbon]
|
||||||
|
source (to automatically get the docstrings). The `user` namespace can be run in a normal Clojure REPL, and
|
||||||
|
contains the function to generate the files.
|
||||||
|
|
||||||
|
First clone the semantic-ui-react repo:
|
||||||
|
```
|
||||||
|
git clone https://github.com/carbon-design-system/carbon
|
||||||
|
```
|
||||||
|
|
||||||
|
In the cloned repository, run:
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
Then using the path to the generated packages/react/build/docgen/components folder, start a repl and run
|
||||||
|
```
|
||||||
|
(gen-factories "path/to/generated/docgen/components")
|
||||||
|
```
|
||||||
|
|
||||||
|
== LICENSE
|
||||||
|
|
||||||
|
Copyright 2020 Daniel Ziltener
|
||||||
|
|
||||||
|
MIT Public License
|
|
@ -0,0 +1,12 @@
|
||||||
|
{:paths ["src/main"]
|
||||||
|
:deps {}
|
||||||
|
:aliases {:outdated {:extra-deps {olical/depot {:mvn/version "1.8.4"}
|
||||||
|
org.clojure/tools.namespace {:mvn/version "1.0.0"}}
|
||||||
|
:main-opts ["-m" "depot.outdated.main" "-a" "outdated"]}
|
||||||
|
:dev {:extra-paths ["src/workspaces" "src/dev"]
|
||||||
|
:extra-deps {org.clojure/clojure {:mvn/version "1.10.1" :scope "provided"}
|
||||||
|
org.clojure/clojurescript {:mvn/version "1.10.773" :scope "provided"}
|
||||||
|
org.clojure/data.json {:mvn/version "1.0.0"}
|
||||||
|
com.fulcrologic/fulcro {:mvn/version "3.2.9" :scope "provided"}
|
||||||
|
thheller/shadow-cljs {:mvn/version "2.9.10"}
|
||||||
|
nubank/workspaces {:mvn/version "1.0.15"}}}}}
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"name": "fulcro3-carbon-wrappers",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Carbon Design System Wrapper",
|
||||||
|
"main": "index.js",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://gitea.lyrion.ch/zilti/carbon-wrapper.git"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://gitea.lyrion.ch/zilti/carbon-wrapper/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://gitea.lyrion.ch/zilti/carbon-wrapper",
|
||||||
|
"devDependencies": {
|
||||||
|
"carbon-components": "^10.12.0",
|
||||||
|
"carbon-components-react": "^7.12.0",
|
||||||
|
"carbon-icons": "^7.0.7",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"shadow-cljs": "^2.9.10",
|
||||||
|
"highlight.js": "9.12.0",
|
||||||
|
"react-grid-layout": "0.16.6",
|
||||||
|
"react-icons": "2.2.7",
|
||||||
|
"reakit": "0.11.1"
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head lang="en">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Template Devcards</title>
|
||||||
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
|
||||||
|
<link rel="stylesheet"
|
||||||
|
href="//cdnjs.cloudflare.com/ajax/libs/carbon-components/10.12.0/css/carbon-components.min.css">
|
||||||
|
</link>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script src="js/workspaces/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -0,0 +1,10 @@
|
||||||
|
{:deps {:aliases [:dev]}
|
||||||
|
:nrepl {:port 9000}
|
||||||
|
:builds {:workspaces {:target :browser
|
||||||
|
:output-dir "resources/public/js/workspaces"
|
||||||
|
:asset-path "/js/workspaces"
|
||||||
|
:devtools {:preloads [com.fulcrologic.fulcro.inspect.preload]
|
||||||
|
:http-root "resources/public"
|
||||||
|
:http-port 8023
|
||||||
|
:http-resource-root "."}
|
||||||
|
:modules {:main {:entries [com.ibm.carbon.workspaces-main]}}}}}
|
|
@ -0,0 +1,117 @@
|
||||||
|
(ns user
|
||||||
|
(:require
|
||||||
|
[clojure.string :as str]
|
||||||
|
[clojure.data.json :as json]
|
||||||
|
[clojure.java.io :as io]))
|
||||||
|
|
||||||
|
(defn gen-prop-docstring [prop {:keys [defaultValue type required description]}]
|
||||||
|
(let [prop (name prop)
|
||||||
|
required (if required " (required)" "")
|
||||||
|
type (format "(%s)" (:name type))
|
||||||
|
description description
|
||||||
|
defaultValue (if defaultValue (format "Default: %s" (:value defaultValue)) "")
|
||||||
|
values (if (:value type) (format "Possible values: %s" (:value type)) "")]
|
||||||
|
(format " - %s %s%s: %s %s %s\n" prop type required description defaultValue values)))
|
||||||
|
|
||||||
|
(defn gen-docstring [{:keys [description props]}]
|
||||||
|
(let [description (if-not (str/blank? description) (str description "\n") description)
|
||||||
|
props (reduce #(str %1 (gen-prop-docstring (key %2) (val %2)))
|
||||||
|
"Props:\n"
|
||||||
|
props)]
|
||||||
|
(str description props)))
|
||||||
|
|
||||||
|
(defn quoted [s] (str "\"" s "\""))
|
||||||
|
(defn escaped [s] (str/replace s "\"" "\\\""))
|
||||||
|
|
||||||
|
(defn hyphenated [camelCase]
|
||||||
|
(println "Hyphenating" camelCase)
|
||||||
|
(if (= "UIShell" camelCase)
|
||||||
|
"ui-shell"
|
||||||
|
(-> camelCase
|
||||||
|
(str/replace #"([A-Z])" "-$1")
|
||||||
|
(str/lower-case)
|
||||||
|
(str/replace #"^-" ""))))
|
||||||
|
|
||||||
|
(def input-factory-classes
|
||||||
|
#{"Checkbox"
|
||||||
|
"ComboBox"
|
||||||
|
"FormInput"
|
||||||
|
"DropdownSearchInput"
|
||||||
|
"Search"
|
||||||
|
"TextArea"
|
||||||
|
"TextInput"})
|
||||||
|
|
||||||
|
(defn factory-helper [class]
|
||||||
|
(if (contains? input-factory-classes class)
|
||||||
|
"wrapped-factory-apply"
|
||||||
|
"factory-apply"))
|
||||||
|
|
||||||
|
(defn gen-json [js]
|
||||||
|
(let [datasplit (str/split js #";\n")
|
||||||
|
match (first (filter #(re-find #".*__docgen.*" %) datasplit))]
|
||||||
|
(if-not (nil? match)
|
||||||
|
(json/read-str (apply str (drop-while #(not= % \{) match)) :key-fn keyword)
|
||||||
|
nil)))
|
||||||
|
|
||||||
|
(defn guess-display-name [file display-name]
|
||||||
|
(if (nil? display-name)
|
||||||
|
(do (print "No display name found for" file "and thus will guess...")
|
||||||
|
(let [display-name (-> file
|
||||||
|
(str/replace #"\.js" "")
|
||||||
|
(str/replace #"\." ""))]
|
||||||
|
(println "Guessed name:" display-name)
|
||||||
|
display-name))
|
||||||
|
display-name))
|
||||||
|
|
||||||
|
(defn gen-factory-map [dir]
|
||||||
|
(fn [{:keys [subdir file]}]
|
||||||
|
(println "Generating" subdir "/" file "...")
|
||||||
|
(if-let [{:keys [displayName description props] :as docs} (gen-json (slurp (str dir "/" subdir "/" file)))]
|
||||||
|
(let [displayName (guess-display-name file displayName)
|
||||||
|
class displayName
|
||||||
|
factory-name (str "ui-" (hyphenated class))
|
||||||
|
filename (str "src/main/ch/lyrion/carbon/" (hyphenated subdir) "/" (str/replace factory-name #"-" "_") ".cljs")
|
||||||
|
nns (str "ch.lyrion.carbon." (hyphenated subdir) "." factory-name)
|
||||||
|
include-file (str "carbon-components-react/lib/components/" subdir "/" file)
|
||||||
|
docstring (gen-docstring docs)]
|
||||||
|
{:class class
|
||||||
|
:factory-name factory-name
|
||||||
|
:filename filename
|
||||||
|
:ns nns
|
||||||
|
:include-file include-file
|
||||||
|
:docstring docstring})
|
||||||
|
nil)))
|
||||||
|
|
||||||
|
(defn gen-component-filelist [dir]
|
||||||
|
(fn [subdir]
|
||||||
|
(let [path (str dir "/" subdir)]
|
||||||
|
(->> (seq (.list (io/file path)))
|
||||||
|
(remove #(or (= % "index.js")
|
||||||
|
(str/ends-with? % "-story.js")
|
||||||
|
(str/ends-with? % "-test.js")
|
||||||
|
(not (str/ends-with? % ".js"))))
|
||||||
|
(map #(identity {:subdir subdir
|
||||||
|
:file %}))))))
|
||||||
|
|
||||||
|
(defn factory-ns-shadow [ns class factory-name include-file docstring]
|
||||||
|
(str "(ns " ns "\n"
|
||||||
|
" (:require\n"
|
||||||
|
" [ch.lyrion.carbon.factory-helpers :as h]\n"
|
||||||
|
" [\"" include-file "\" :default " class "]))\n\n"
|
||||||
|
"(def " factory-name "\n"
|
||||||
|
"\n"
|
||||||
|
(quoted (escaped docstring))
|
||||||
|
"\n (h/" (factory-helper class) " " class "))"))
|
||||||
|
|
||||||
|
(defn gen-factories [component-dir]
|
||||||
|
(let [modules (->> (seq (.list (io/file component-dir)))
|
||||||
|
(map (gen-component-filelist component-dir))
|
||||||
|
flatten
|
||||||
|
(map (gen-factory-map component-dir))
|
||||||
|
(remove nil?)
|
||||||
|
(sort-by :factory-name))]
|
||||||
|
(io/make-parents "src/main/ch/lyrion/carbon/factories.cljs")
|
||||||
|
(doseq [{:keys [filename ns class factory-name include-file filename docstring] :as m} modules]
|
||||||
|
(println "Generating" filename "...")
|
||||||
|
(io/make-parents filename)
|
||||||
|
(spit (io/as-file filename) (factory-ns-shadow ns class factory-name include-file docstring)))))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.accordion.ui-accordion
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Accordion/Accordion.js" :default Accordion]))
|
||||||
|
|
||||||
|
(def ui-accordion
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- align (enum): Specify the alignment of the accordion heading title and chevron. Default: 'end'
|
||||||
|
- children (node): Pass in the children that will be rendered within the Accordion
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
"
|
||||||
|
(h/factory-apply Accordion))
|
|
@ -0,0 +1,19 @@
|
||||||
|
(ns ch.lyrion.carbon.accordion.ui-accordion-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Accordion/AccordionItem.js" :default AccordionItem]))
|
||||||
|
|
||||||
|
(def ui-accordion-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- open (bool): `true` to open the expando. Default: false
|
||||||
|
- renderExpando (func): The callback function to render the expando button.
|
||||||
|
Can be a React component class. Default: props => <button {...props} />
|
||||||
|
- title (node): The accordion title. Default: 'title'
|
||||||
|
- children (node): Provide the contents of your AccordionItem
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- iconDescription (custom): The description of the expando icon.
|
||||||
|
- onClick (func): The handler of the massaged `click` event.
|
||||||
|
- onHeadingClick (func): The handler of the massaged `click` event on the heading.
|
||||||
|
"
|
||||||
|
(h/factory-apply AccordionItem))
|
|
@ -0,0 +1,15 @@
|
||||||
|
(ns ch.lyrion.carbon.accordion.ui-accordion-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Accordion/Accordion.Skeleton.js" :default AccordionSkeleton]))
|
||||||
|
|
||||||
|
(def ui-accordion-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- open (bool): `false` to not display the first item opened Default: true
|
||||||
|
- count (number): Set number of items to render Default: 4
|
||||||
|
- align (enum): Specify the alignment of the accordion heading title and chevron. Default: 'end'
|
||||||
|
- uid (custom): Set unique identifier to generate unique item keys
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply AccordionSkeleton))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Breadcrumb/Breadcrumb.js" :default Breadcrumb]))
|
||||||
|
|
||||||
|
(def ui-breadcrumb
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- aria-label (string): Specify the label for the breadcrumb container
|
||||||
|
- children (node): Pass in the BreadcrumbItem's for your Breadcrumb
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- noTrailingSlash (bool): Optional prop to omit the trailing slash for the breadcrumbs
|
||||||
|
"
|
||||||
|
(h/factory-apply Breadcrumb))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Breadcrumb/BreadcrumbItem.js" :default BreadcrumbItem]))
|
||||||
|
|
||||||
|
(def ui-breadcrumb-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Pass in content that will be inside of the BreadcrumbItem
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- href (string): Optional string representing the link location for the BreadcrumbItem
|
||||||
|
- isCurrentPage (bool): Provide if this breadcrumb item represents the current page
|
||||||
|
"
|
||||||
|
(h/factory-apply BreadcrumbItem))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Breadcrumb/Breadcrumb.Skeleton.js" :default BreadcrumbSkeleton]))
|
||||||
|
|
||||||
|
(def ui-breadcrumb-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply BreadcrumbSkeleton))
|
|
@ -0,0 +1,33 @@
|
||||||
|
(ns ch.lyrion.carbon.button.ui-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Button/Button.js" :default Button]))
|
||||||
|
|
||||||
|
(def ui-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- role (string): Optional prop to specify the role of the Button
|
||||||
|
- tooltipPosition (enum): Specify the direction of the tooltip for icon-only buttons.
|
||||||
|
Can be either top, right, bottom, or left.
|
||||||
|
- children (node): Specify the content of your Button
|
||||||
|
- tabIndex (number): Optional prop to specify the tabIndex of the Button Default: 0
|
||||||
|
- tooltipAlignment (enum): Specify the alignment of the tooltip to the icon-only button.
|
||||||
|
Can be one of: start, center, or end.
|
||||||
|
- disabled (bool): Specify whether the Button should be disabled, or not Default: false
|
||||||
|
- as (union): Specify how the button itself should be rendered.
|
||||||
|
Make sure to apply all props to the root node and render children appropriately
|
||||||
|
- type (enum): Optional prop to specify the type of the Button Default: 'button'
|
||||||
|
- className (string): Specify an optional className to be added to your Button
|
||||||
|
- renderIcon (union): Optional prop to allow overriding the icon rendering.
|
||||||
|
Can be a React component class
|
||||||
|
- size (enum): Specify the size of the button, from a list of available sizes.
|
||||||
|
For `default` buttons, this prop can remain unspecified.
|
||||||
|
- small (custom): Deprecated in v10 in favor of `size`.
|
||||||
|
Specify whether the Button should be a small variant
|
||||||
|
- kind (enum): Specify the kind of Button you want to create Default: 'primary'
|
||||||
|
- hasIconOnly (bool): Specify if the button is an icon-only button
|
||||||
|
- iconDescription (custom): If specifying the `renderIcon` prop, provide a description for that icon that can
|
||||||
|
be read by screen readers
|
||||||
|
- href (string): Optionally specify an href for your Button to become an <a> element
|
||||||
|
"
|
||||||
|
(h/factory-apply Button))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.button.ui-button-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Button/Button.Skeleton.js" :default ButtonSkeleton]))
|
||||||
|
|
||||||
|
(def ui-button-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- small (bool): Specify whether the Button should be a small variant Default: false
|
||||||
|
- href (string): Optionally specify an href for your Button to become an <a> element
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply ButtonSkeleton))
|
|
@ -0,0 +1,23 @@
|
||||||
|
(ns ch.lyrion.carbon.checkbox.ui-checkbox
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Checkbox/Checkbox.js" :default Checkbox]))
|
||||||
|
|
||||||
|
(def ui-checkbox
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- wrapperClassName (string): The CSS class name to be placed on the wrapping element
|
||||||
|
- disabled (bool): Specify whether the Checkbox should be disabled
|
||||||
|
- className (string): Specify an optional className to be applied to the <label> node
|
||||||
|
- title (string): Specify a title for the <label> node for the Checkbox Default: ''
|
||||||
|
- indeterminate (bool): Specify whether the Checkbox is in an indeterminate state Default: false
|
||||||
|
- defaultChecked (bool): Specify whether the underlying input should be checked by default
|
||||||
|
- hideLabel (bool): Specify whether the label should be hidden, or not
|
||||||
|
- id (string) (required): Provide an `id` to uniquely identify the Checkbox input
|
||||||
|
- checked (bool): Specify whether the underlying input should be checked
|
||||||
|
- onChange (func): Receives three arguments: true/false, the checkbox's id, and the dom event.
|
||||||
|
`(value, id, event) => console.log({value, id, event})` Default: () => {}
|
||||||
|
- labelText (node) (required): Provide a label to provide a description of the Checkbox input that you are
|
||||||
|
exposing to the user
|
||||||
|
"
|
||||||
|
(h/wrapped-factory-apply Checkbox))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.checkbox.ui-checkbox-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Checkbox/Checkbox.Skeleton.js" :default CheckboxSkeleton]))
|
||||||
|
|
||||||
|
(def ui-checkbox-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply CheckboxSkeleton))
|
|
@ -0,0 +1,27 @@
|
||||||
|
(ns ch.lyrion.carbon.code-snippet.ui-code-snippet
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/CodeSnippet/CodeSnippet.js" :default CodeSnippet]))
|
||||||
|
|
||||||
|
(def ui-code-snippet
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- copyButtonDescription (string): Specify the description for the Copy Button
|
||||||
|
- children (string): Provide the content of your CodeSnippet as a string
|
||||||
|
- feedback (string): Specify the string displayed when the snippet is copied
|
||||||
|
- copyLabel (string): Specify a label to be read by screen readers on the containing <textbox>
|
||||||
|
node
|
||||||
|
- showMoreText (string): Specify a string that is displayed when the Code Snippet text is more
|
||||||
|
than 15 lines Default: 'Show more'
|
||||||
|
- type (enum): Provide the type of Code Snippet Default: 'single'
|
||||||
|
- showLessText (string): Specify a string that is displayed when the Code Snippet has been
|
||||||
|
interacted with to show more lines Default: 'Show less'
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- ariaLabel (string): Specify a label to be read by screen readers on the containing <textbox>
|
||||||
|
node
|
||||||
|
- light (bool): Specify whether you are using the light variant of the Code Snippet,
|
||||||
|
typically used for inline snippet to display an alternate color
|
||||||
|
- onClick (func): An optional handler to listen to the `onClick` even fired by the Copy
|
||||||
|
Button
|
||||||
|
"
|
||||||
|
(h/factory-apply CodeSnippet))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.code-snippet.ui-code-snippet-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/CodeSnippet/CodeSnippet.Skeleton.js" :default CodeSnippetSkeleton]))
|
||||||
|
|
||||||
|
(def ui-code-snippet-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- type (enum): The type of the code snippet, including single or multi Default: 'single'
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
"
|
||||||
|
(h/factory-apply CodeSnippetSkeleton))
|
|
@ -0,0 +1,50 @@
|
||||||
|
(ns ch.lyrion.carbon.combo-box.ui-combo-box
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ComboBox/ComboBox.js" :default ComboBox]))
|
||||||
|
|
||||||
|
(def ui-combo-box
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- invalidText (string): Message which is displayed if the value is invalid.
|
||||||
|
- selectedItem (union): For full control of the selection
|
||||||
|
- placeholder (string) (required): Used to provide a placeholder text node before a user enters any input.
|
||||||
|
This is only present if the control has no items selected
|
||||||
|
- disabled (bool): Specify if the control should be disabled, or not Default: false
|
||||||
|
- translateWithId (func): Specify a custom translation function that takes in a message identifier
|
||||||
|
and returns the localized string for the message
|
||||||
|
- itemToElement (func): Optional function to render items as custom components instead of strings.
|
||||||
|
Defaults to null and is overriden by a getter Default: null
|
||||||
|
- type (custom): Currently supports either the default type, or an inline variant Default: 'default'
|
||||||
|
- invalid (bool): Specify if the currently selected value is invalid.
|
||||||
|
- className (string): An optional className to add to the container node
|
||||||
|
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
|
||||||
|
- downshiftProps (shape): Additional props passed to Downshift
|
||||||
|
- initialSelectedItem (union): Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
|
||||||
|
from their collection that are pre-selected
|
||||||
|
- id (string) (required): Specify a custom `id` for the input
|
||||||
|
- itemToString (func): Helper function passed to downshift that allows the library to render a
|
||||||
|
given item to a string label. By default, it extracts the `label` field
|
||||||
|
from a given item to serve as the item label in the list Default: item => {
|
||||||
|
if (typeof item === 'string') {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
|
||||||
|
return item && item.label;
|
||||||
|
}
|
||||||
|
- onInputChange (func): Callback function to notify consumer when the text input changes.
|
||||||
|
This provides support to change available items based on the text.
|
||||||
|
@param {string} inputText
|
||||||
|
- ariaLabel (string): 'aria-label' of the ListBox component. Default: 'Choose an item'
|
||||||
|
- items (array) (required): We try to stay as generic as possible here to allow individuals to pass
|
||||||
|
in a collection of whatever kind of data structure they prefer
|
||||||
|
- onChange (func) (required): `onChange` is a utility for this controlled component to communicate to a
|
||||||
|
consuming component when a specific dropdown item is selected.
|
||||||
|
@param {{ selectedItem }}
|
||||||
|
- light (bool): should use \"light theme\" (white background)? Default: false
|
||||||
|
- shouldFilterItem (func): Specify your own filtering logic by passing in a `shouldFilterItem`
|
||||||
|
function that takes in the current input and an item and passes back
|
||||||
|
whether or not the item should be filtered. Default: () => true
|
||||||
|
- direction (enum): Specify the direction of the combobox dropdown. Can be either top or bottom. Default: 'bottom'
|
||||||
|
"
|
||||||
|
(h/wrapped-factory-apply ComboBox))
|
|
@ -0,0 +1,20 @@
|
||||||
|
(ns ch.lyrion.carbon.composed-modal.ui-composed-modal
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ComposedModal/ComposedModal.js" :default ComposedModal]))
|
||||||
|
|
||||||
|
(def ui-composed-modal
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- onKeyDown (func): Specify an optional handler for the `onKeyDown` event. Called for all
|
||||||
|
`onKeyDown` events that do not close the modal Default: () => {}
|
||||||
|
- selectorPrimaryFocus (string): Specify a CSS selector that matches the DOM element that should be
|
||||||
|
focused when the Modal opens Default: '[data-modal-primary-focus]'
|
||||||
|
- className (string): Specify an optional className to be applied to the modal root node
|
||||||
|
- containerClassName (string): Specify an optional className to be applied to the modal node
|
||||||
|
- onClose (func): Specify an optional handler for closing modal.
|
||||||
|
Returning `false` here prevents closing modal.
|
||||||
|
- open (bool): Specify whether the Modal is currently open
|
||||||
|
- size (enum): Specify the size variant.
|
||||||
|
"
|
||||||
|
(h/factory-apply ComposedModal))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.content-switcher.ui-content-switcher
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ContentSwitcher/ContentSwitcher.js" :default ContentSwitcher]))
|
||||||
|
|
||||||
|
(def ui-content-switcher
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- selectedIndex (number): Specify a selected index for the initially selected content Default: 0
|
||||||
|
- selectionMode (enum): Choose whether or not to automatically change selection on focus Default: 'automatic'
|
||||||
|
- children (node): Pass in Switch components to be rendered in the ContentSwitcher
|
||||||
|
- className (string): Specify an optional className to be added to the container node
|
||||||
|
- onChange (func) (required): Specify an `onChange` handler that is called whenever the ContentSwitcher
|
||||||
|
changes which item is selected
|
||||||
|
"
|
||||||
|
(h/factory-apply ContentSwitcher))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.copy-button.ui-copy-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/CopyButton/CopyButton.js" :default CopyButton]))
|
||||||
|
|
||||||
|
(def ui-copy-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- iconDescription (string): Provide a description for the icon representing the copy action that can
|
||||||
|
be read by screen readers Default: 'Copy to clipboard'
|
||||||
|
- feedback (string): Specify the string that is displayed when the button is clicked and the
|
||||||
|
content is copied Default: 'Copied!'
|
||||||
|
- feedbackTimeout (number): Specify the time it takes for the feedback message to timeout Default: 2000
|
||||||
|
- onClick (func): Specify an optional `onClick` handler that is called when the underlying
|
||||||
|
<button> is clicked Default: () => {}
|
||||||
|
- className (string): Specify an optional className to be applied to the underlying <button>
|
||||||
|
"
|
||||||
|
(h/factory-apply CopyButton))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.copy.ui-copy
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Copy/Copy.js" :default Copy]))
|
||||||
|
|
||||||
|
(def ui-copy
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- feedback (string): Specify the string that is displayed when the button is clicked and the
|
||||||
|
content is copied Default: 'Copied!'
|
||||||
|
- feedbackTimeout (number): Specify the time it takes for the feedback message to timeout Default: 2000
|
||||||
|
- onClick (func): Specify an optional `onClick` handler that is called when the underlying
|
||||||
|
<button> is clicked Default: () => {}
|
||||||
|
- children (node): Pass in content to be rendred in the underlying <button>
|
||||||
|
- className (string): Specify an optional className to be applied to the underlying <button>
|
||||||
|
"
|
||||||
|
(h/factory-apply Copy))
|
|
@ -0,0 +1,10 @@
|
||||||
|
(ns ch.lyrion.carbon.danger-button.ui-danger-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DangerButton/DangerButton.js" :default DangerButton]))
|
||||||
|
|
||||||
|
(def ui-danger-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
"
|
||||||
|
(h/factory-apply DangerButton))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table-skeleton.ui-data-table-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTableSkeleton/DataTableSkeleton.js" :default DataTableSkeleton]))
|
||||||
|
|
||||||
|
(def ui-data-table-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- rowCount (number): Specify the number of rows that you want to render in the skeleton state Default: 5
|
||||||
|
- columnCount (number): Specify the number of columns that you want to render in the skeleton state Default: 5
|
||||||
|
- zebra (bool): Optionally specify whether you want the DataTable to be zebra striped Default: false
|
||||||
|
- compact (bool): Optionally specify whether you want the Skeleton to be rendered as a
|
||||||
|
compact DataTable Default: false
|
||||||
|
- headers (union): Optionally specify the displayed headers Default: []
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply DataTableSkeleton))
|
|
@ -0,0 +1,39 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-data-table
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/DataTable.js" :default DataTable]))
|
||||||
|
|
||||||
|
(def ui-data-table
|
||||||
|
|
||||||
|
"Data Tables are used to represent a collection of resources, displaying a
|
||||||
|
subset of their fields in columns, or headers. We prioritize direct updates
|
||||||
|
to the state of what we're rendering, so internally we end up normalizing the
|
||||||
|
given data and then denormalizing it when rendering.
|
||||||
|
|
||||||
|
As a result, each part of the DataTable is accessible through look-up by id,
|
||||||
|
and updating the state of the single entity will cascade updates to the
|
||||||
|
consumer.
|
||||||
|
Props:
|
||||||
|
- overflowMenuOnHover (bool): Specify whether the overflow menu (if it exists) should be shown always, or only on hover Default: true
|
||||||
|
- translateWithId (func): Optional method that takes in a message id and returns an
|
||||||
|
internationalized string. See `DataTable.translationKeys` for all
|
||||||
|
available message ids. Default: id => defaultTranslations[id]
|
||||||
|
- radio (bool): Specify whether the control should be a radio button or inline checkbox
|
||||||
|
- locale (string): Provide a string for the current locale Default: 'en'
|
||||||
|
- stickyHeader (bool): Specify whether the header should be sticky.
|
||||||
|
Still experimental: may not work with every combination of table props
|
||||||
|
- isSortable (bool): Specify whether the table should be able to be sorted by its headers
|
||||||
|
- size (enum): `normal` Change the row height of table Default: 'normal'
|
||||||
|
- headers (arrayOf) (required): The `headers` prop represents the order in which the headers should
|
||||||
|
appear in the table. We expect an array of objects to be passed in, where
|
||||||
|
`key` is the name of the key in a row object, and `header` is the name of
|
||||||
|
the header.
|
||||||
|
- rows (arrayOf) (required): The `rows` prop is where you provide us with a list of all the rows that
|
||||||
|
you want to render in the table. The only hard requirement is that this
|
||||||
|
is an array of objects, and that each object has a unique `id` field
|
||||||
|
available on it.
|
||||||
|
- filterRows (func): Optional hook to manually control filtering of the rows from the
|
||||||
|
TableToolbarSearch component Default: defaultFilterRows
|
||||||
|
- sortRow (func): Optional hook to manually control sorting of the rows. Default: defaultSortRow
|
||||||
|
"
|
||||||
|
(h/factory-apply DataTable))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/Table.js" :default Table]))
|
||||||
|
|
||||||
|
(def ui-table
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- isSortable (bool): `false` If true, will apply sorting styles Default: false
|
||||||
|
- overflowMenuOnHover (bool): Specify whether the overflow menu (if it exists) should be shown always, or only on hover Default: true
|
||||||
|
- className (string):
|
||||||
|
- useZebraStyles (bool): `true` to add useZebraStyles striping.
|
||||||
|
- size (enum): `normal` Change the row height of table
|
||||||
|
- useStaticWidth (bool): `false` If true, will use a width of 'auto' instead of 100%
|
||||||
|
- shouldShowBorder (bool): `false` If true, will remove the table border
|
||||||
|
- stickyHeader (bool): `false` If true, will keep the header sticky (only data rows will scroll)
|
||||||
|
"
|
||||||
|
(h/factory-apply Table))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-batch-action
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableBatchAction.js" :default TableBatchAction]))
|
||||||
|
|
||||||
|
(def ui-table-batch-action
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- renderIcon (union): Optional function to render your own icon in the underlying button Default: iconAddSolid
|
||||||
|
- hasIconOnly (bool): Specify if the button is an icon-only button
|
||||||
|
- iconDescription (custom): If specifying the `renderIcon` prop, provide a description for that icon that can
|
||||||
|
be read by screen readers
|
||||||
|
"
|
||||||
|
(h/factory-apply TableBatchAction))
|
|
@ -0,0 +1,26 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-batch-actions
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableBatchActions.js" :default TableBatchActions]))
|
||||||
|
|
||||||
|
(def ui-table-batch-actions
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- translateWithId (func): Supply a method to translate internal strings with your i18n tool of
|
||||||
|
choice. Translation keys are avabile on the `translationKeys` field for
|
||||||
|
this component. Default: (id, state) => {
|
||||||
|
if (id === 'carbon.table.batch.cancel') {
|
||||||
|
return translationKeys[id];
|
||||||
|
}
|
||||||
|
return `${state.totalSelected} ${translationKeys[id]}`;
|
||||||
|
}
|
||||||
|
- children (node):
|
||||||
|
- className (string):
|
||||||
|
- shouldShowBatchActions (bool): Boolean specifier for whether or not the batch action bar should be
|
||||||
|
displayed
|
||||||
|
- totalSelected (number) (required): Numeric representation of the total number of items selected in a table.
|
||||||
|
This number is used to derive the selection message
|
||||||
|
- onCancel (func) (required): Hook required to listen for when the user initiates a cancel request
|
||||||
|
through this comopnent
|
||||||
|
"
|
||||||
|
(h/factory-apply TableBatchActions))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-body
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableBody.js" :default TableBody]))
|
||||||
|
|
||||||
|
(def ui-table-body
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- aria-live (enum): `polite` Adjust the notification behavior of screen readers Default: 'polite'
|
||||||
|
- className (string):
|
||||||
|
- children (node):
|
||||||
|
"
|
||||||
|
(h/factory-apply TableBody))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-container
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableContainer.js" :default TableContainer]))
|
||||||
|
|
||||||
|
(def ui-table-container
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string):
|
||||||
|
- children (node):
|
||||||
|
- title (node): Provide a title for the Table
|
||||||
|
- description (node): Optional description text for the Table
|
||||||
|
"
|
||||||
|
(h/factory-apply TableContainer))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-expand-header
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableExpandHeader.js" :default TableExpandHeader]))
|
||||||
|
|
||||||
|
(def ui-table-expand-header
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string):
|
||||||
|
- children (node):
|
||||||
|
- ariaLabel (custom): Specify the string read by a voice reader when the expand trigger is
|
||||||
|
focused
|
||||||
|
- isExpanded (custom): Specify whether this row is expanded or not. This helps coordinate data
|
||||||
|
attributes so that `TableExpandRow` and `TableExapndedRow` work together
|
||||||
|
- onExpand (custom): Hook for when a listener initiates a request to expand the given row
|
||||||
|
- expandIconDescription (string): The description of the chevron right icon, to be put in its SVG `<title>` element.
|
||||||
|
"
|
||||||
|
(h/factory-apply TableExpandHeader))
|
|
@ -0,0 +1,19 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-expand-row
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableExpandRow.js" :default TableExpandRow]))
|
||||||
|
|
||||||
|
(def ui-table-expand-row
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- expandHeader (string): The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43 Default: 'expand'
|
||||||
|
- ariaLabel (string) (required): Specify the string read by a voice reader when the expand trigger is
|
||||||
|
focused
|
||||||
|
- className (string):
|
||||||
|
- children (node):
|
||||||
|
- isExpanded (bool) (required): Specify whether this row is expanded or not. This helps coordinate data
|
||||||
|
attributes so that `TableExpandRow` and `TableExapndedRow` work together
|
||||||
|
- onExpand (func) (required): Hook for when a listener initiates a request to expand the given row
|
||||||
|
- expandIconDescription (string): The description of the chevron right icon, to be put in its SVG `<title>` element.
|
||||||
|
"
|
||||||
|
(h/factory-apply TableExpandRow))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-expanded-row
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableExpandedRow.js" :default TableExpandedRow]))
|
||||||
|
|
||||||
|
(def ui-table-expanded-row
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Pass in the contents for your TableExpandedRow
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- colSpan (number) (required): The width of the expanded row's internal cell
|
||||||
|
"
|
||||||
|
(h/factory-apply TableExpandedRow))
|
|
@ -0,0 +1,44 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-header
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableHeader.js" :default TableHeader]))
|
||||||
|
|
||||||
|
(def ui-table-header
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Pass in children that will be embedded in the table header label
|
||||||
|
- isSortHeader (bool): Specify whether this header is the header by which a table is being sorted
|
||||||
|
by
|
||||||
|
- translateWithId (func): Supply a method to translate internal strings with your i18n tool of
|
||||||
|
choice. Translation keys are avabile on the `translationKeys` field for
|
||||||
|
this component. Default: (key, { sortDirection, isSortHeader, sortStates }) => {
|
||||||
|
if (key === translationKeys.iconDescription) {
|
||||||
|
if (isSortHeader) {
|
||||||
|
// When transitioning, we know that the sequence of states is as follows:
|
||||||
|
// NONE -> ASC -> DESC -> NONE
|
||||||
|
if (sortDirection === sortStates.NONE) {
|
||||||
|
return 'Sort rows by this header in ascending order';
|
||||||
|
}
|
||||||
|
if (sortDirection === sortStates.ASC) {
|
||||||
|
return 'Sort rows by this header in descending order';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Unsort rows by this header';
|
||||||
|
}
|
||||||
|
return 'Sort rows by this header in ascending order';
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
- scope (string): Specify the scope of this table header. You can find more info about this
|
||||||
|
attribute at the following URL:
|
||||||
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope Default: 'col'
|
||||||
|
- isSortable (bool): Specify whether this header is one through which a user can sort the table Default: false
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- colSpan (number): Specify `colSpan` as a non-negative integer value to indicate how
|
||||||
|
many columns the TableHeader cell extends in a table
|
||||||
|
- sortDirection (enum): Specify which direction we are currently sorting by, should be one of DESC,
|
||||||
|
NONE, or ASC.
|
||||||
|
- onClick (func): Hook that is invoked when the header is clicked
|
||||||
|
"
|
||||||
|
(h/factory-apply TableHeader))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-row
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableRow.js" :default TableRow]))
|
||||||
|
|
||||||
|
(def ui-table-row
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
"
|
||||||
|
(h/factory-apply TableRow))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-select-all
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableSelectAll.js" :default TableSelectAll]))
|
||||||
|
|
||||||
|
(def ui-table-select-all
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- ariaLabel (string): Specify the aria label for the underlying input control Default: 'Select all rows in the table'
|
||||||
|
- checked (bool) (required): Specify whether all items are selected, or not
|
||||||
|
- id (string) (required): Provide an `id` for the underlying input control
|
||||||
|
- indeterminate (bool): Specify whether the selection only has a subset of all items
|
||||||
|
- name (string) (required): Provide a `name` for the underlying input control
|
||||||
|
- onSelect (func) (required): Provide a handler to listen to when a user initiates a selection request
|
||||||
|
- className (string): The CSS class names of the cell that wraps the underlying input control
|
||||||
|
"
|
||||||
|
(h/factory-apply TableSelectAll))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-select-row
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableSelectRow.js" :default TableSelectRow]))
|
||||||
|
|
||||||
|
(def ui-table-select-row
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- ariaLabel (string) (required): Specify the aria label for the underlying input control
|
||||||
|
- checked (bool) (required): Specify whether all items are selected, or not
|
||||||
|
- disabled (bool): Specify whether the control is disabled
|
||||||
|
- id (string) (required): Provide an `id` for the underlying input control
|
||||||
|
- name (string) (required): Provide a `name` for the underlying input control
|
||||||
|
- onSelect (func) (required): Provide a handler to listen to when a user initiates a selection request
|
||||||
|
- radio (bool): Specify whether the control should be a radio button or inline checkbox
|
||||||
|
- className (string): The CSS class names of the cell that wraps the underlying input control
|
||||||
|
"
|
||||||
|
(h/factory-apply TableSelectRow))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-toolbar
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableToolbar.js" :default TableToolbar]))
|
||||||
|
|
||||||
|
(def ui-table-toolbar
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- aria-label (null): null Default: 'data table toolbar'
|
||||||
|
- children (node): Pass in the children that will be rendered inside the TableToolbar
|
||||||
|
- size (enum): `normal` Change the row height of table
|
||||||
|
"
|
||||||
|
(h/factory-apply TableToolbar))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-toolbar-action
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableToolbarAction.js" :default TableToolbarAction]))
|
||||||
|
|
||||||
|
(def ui-table-toolbar-action
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node):
|
||||||
|
- className (string):
|
||||||
|
- onClick (func) (required):
|
||||||
|
"
|
||||||
|
(h/factory-apply TableToolbarAction))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-toolbar-menu
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableToolbarMenu.js" :default TableToolbarMenu]))
|
||||||
|
|
||||||
|
(def ui-table-toolbar-menu
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- renderIcon (union): Optional prop to allow overriding the default menu icon Default: Settings16
|
||||||
|
- iconDescription (string): The description of the menu icon. Default: 'Settings'
|
||||||
|
- children (node) (required):
|
||||||
|
- className (string): Provide an optional class name for the toolbar menu
|
||||||
|
"
|
||||||
|
(h/factory-apply TableToolbarMenu))
|
|
@ -0,0 +1,24 @@
|
||||||
|
(ns ch.lyrion.carbon.data-table.ui-table-toolbar-search
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DataTable/TableToolbarSearch.js" :default TableToolbarSearch]))
|
||||||
|
|
||||||
|
(def ui-table-toolbar-search
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node):
|
||||||
|
- searchContainerClasses (string): Provide an optional className for the overal container of the Search
|
||||||
|
- tabIndex (union): Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state) Default: '0'
|
||||||
|
- translateWithId (func): Provide custom text for the component for each translation id Default: id => {
|
||||||
|
return translationKeys[id];
|
||||||
|
}
|
||||||
|
- persistent (bool): Whether the search should be allowed to expand Default: false
|
||||||
|
- persistant (custom):
|
||||||
|
- className (string): Provide an optional class name for the search container
|
||||||
|
- id (string): Provide an optional id for the search container
|
||||||
|
- defaultValue (string): Provide an optional default value for the Search component
|
||||||
|
- placeHolderText (string): Provide an optional placeholder text for the Search component
|
||||||
|
- onChange (func): Provide an optional hook that is called each time the input is updated
|
||||||
|
- labelText (string): Provide an optional label text for the Search component icon
|
||||||
|
"
|
||||||
|
(h/factory-apply TableToolbarSearch))
|
|
@ -0,0 +1,22 @@
|
||||||
|
(ns ch.lyrion.carbon.date-picker-input.ui-date-picker-input
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DatePickerInput/DatePickerInput.js" :default DatePickerInput]))
|
||||||
|
|
||||||
|
(def ui-date-picker-input
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- disabled (bool): Specify whether or not the input should be disabled Default: false
|
||||||
|
- type (string): Specify the type of the <input> Default: 'text'
|
||||||
|
- invalid (bool): Specify whether or not the input should be invalid Default: false
|
||||||
|
- size (enum): Specify the size of the Date Picker Input. Currently supports either `sm` or `xl` as an option.
|
||||||
|
- id (string) (required): Specify an id that unique identifies the <input>
|
||||||
|
- onChange (func): Specify an `onChange` handler that is called whenever a change in the
|
||||||
|
input field has occurred Default: () => {}
|
||||||
|
- labelText (node) (required): Provide the text that will be read by a screen reader when visiting this
|
||||||
|
control
|
||||||
|
- iconDescription (string): The description of the calendar icon.
|
||||||
|
- onClick (func): Provide a function to be called when the input field is clicked Default: () => {}
|
||||||
|
- pattern (custom): Provide a regular expression that the input value must match Default: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}'
|
||||||
|
"
|
||||||
|
(h/factory-apply DatePickerInput))
|
|
@ -0,0 +1,78 @@
|
||||||
|
(ns ch.lyrion.carbon.date-picker.ui-date-picker
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DatePicker/DatePicker.js" :default DatePicker]))
|
||||||
|
|
||||||
|
(def ui-date-picker
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): The child nodes.
|
||||||
|
- short (bool): `true` to use the short version. Default: false
|
||||||
|
- appendTo (object): The DOM element the Flatpicker should be inserted into. `<body>` by default.
|
||||||
|
- datePickerType (enum): The type of the date picker:
|
||||||
|
|
||||||
|
* `simple` - Without calendar dropdown.
|
||||||
|
* `single` - With calendar dropdown and single date.
|
||||||
|
* `range` - With calendar dropdown and a date range.
|
||||||
|
- locale (enum): The language locale used to format the days of the week, months, and numbers.
|
||||||
|
|
||||||
|
* `ar` - Arabic
|
||||||
|
* `at` - Austria
|
||||||
|
* `be` - Belarusian
|
||||||
|
* `bg` - Bulgarian
|
||||||
|
* `bn` - Bangla
|
||||||
|
* `cat` - Catalan
|
||||||
|
* `cs` - Czech
|
||||||
|
* `cy` - Welsh
|
||||||
|
* `da` - Danish
|
||||||
|
* `de` - German
|
||||||
|
* `en` - English
|
||||||
|
* `eo` - Esperanto
|
||||||
|
* `es` - Spanish
|
||||||
|
* `et` - Estonian
|
||||||
|
* `fa` - Persian
|
||||||
|
* `fi` - Finnish
|
||||||
|
* `fr` - French
|
||||||
|
* `gr` - Greek
|
||||||
|
* `he` - Hebrew
|
||||||
|
* `hi` - Hindi
|
||||||
|
* `hr` - Croatian
|
||||||
|
* `hu` - Hungarian
|
||||||
|
* `id` - Indonesian
|
||||||
|
* `it` - Italian
|
||||||
|
* `ja` - Japanese
|
||||||
|
* `ko` - Korean
|
||||||
|
* `lt` - Lithuanian
|
||||||
|
* `lv` - Latvian
|
||||||
|
* `mk` - Macedonian
|
||||||
|
* `mn` - Mongolian
|
||||||
|
* `ms` - Malaysian
|
||||||
|
* `my` - Burmese
|
||||||
|
* `nl` - Dutch
|
||||||
|
* `no` - Norwegian
|
||||||
|
* `pa` - Punjabi
|
||||||
|
* `pl` - Polish
|
||||||
|
* `pt` - Portuguese
|
||||||
|
* `ro` - Romanian
|
||||||
|
* `si` - Sinhala
|
||||||
|
* `sk` - Slovak
|
||||||
|
* `sl` - Slovenian
|
||||||
|
* `sq` - Albanian
|
||||||
|
* `sr` - Serbian
|
||||||
|
* `sv` - Swedish
|
||||||
|
* `th` - Thai
|
||||||
|
* `tr` - Turkish
|
||||||
|
* `uk` - Ukrainian
|
||||||
|
* `vn` - Vietnamese
|
||||||
|
* `zh` - Mandarin Default: 'en'
|
||||||
|
- value (union): The value of the date value provided to flatpickr, could
|
||||||
|
be a date, a date number, a date string, an array of dates.
|
||||||
|
- onClose (func): The `close` event handler.
|
||||||
|
- maxDate (string): The maximum date that a user can pick to.
|
||||||
|
- className (string): The CSS class names.
|
||||||
|
- minDate (string): The minimum date that a user can start picking from.
|
||||||
|
- dateFormat (string): The date format. Default: 'm/d/Y'
|
||||||
|
- onChange (func): The `change` event handler.
|
||||||
|
- light (bool): `true` to use the light version. Default: false
|
||||||
|
"
|
||||||
|
(h/factory-apply DatePicker))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.date-picker.ui-date-picker-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/DatePicker/DatePicker.Skeleton.js" :default DatePickerSkeleton]))
|
||||||
|
|
||||||
|
(def ui-date-picker-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- range (bool): Specify whether the skeleton should be of range date picker.
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply DatePickerSkeleton))
|
|
@ -0,0 +1,45 @@
|
||||||
|
(ns ch.lyrion.carbon.dropdown.ui-dropdown
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Dropdown/Dropdown.js" :default Dropdown]))
|
||||||
|
|
||||||
|
(def ui-dropdown
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- helperText (union): Provide helper text that is used alongside the control label for
|
||||||
|
additional help Default: ''
|
||||||
|
- invalidText (string): Message which is displayed if the value is invalid.
|
||||||
|
- selectedItem (union): In the case you want to control the dropdown selection entirely.
|
||||||
|
- disabled (bool): Disable the control Default: false
|
||||||
|
- translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title
|
||||||
|
- itemToElement (func): Function to render items as custom components instead of strings.
|
||||||
|
Defaults to null and is overriden by a getter Default: null
|
||||||
|
- type (custom): The dropdown type, `default` or `inline` Default: 'default'
|
||||||
|
- invalid (bool): Specify if the currently selected value is invalid.
|
||||||
|
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
|
||||||
|
- initialSelectedItem (union): Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
|
||||||
|
from their collection that are pre-selected
|
||||||
|
- label (node) (required): Generic `label` that will be used as the textual representation of what
|
||||||
|
this field is for
|
||||||
|
- id (string) (required): Specify a custom `id`
|
||||||
|
- itemToString (func): Helper function passed to downshift that allows the library to render a
|
||||||
|
given item to a string label. By default, it extracts the `label` field
|
||||||
|
from a given item to serve as the item label in the list. Default: item => {
|
||||||
|
if (typeof item === 'string') {
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
|
||||||
|
return item ? item.label : '';
|
||||||
|
}
|
||||||
|
- ariaLabel (string): 'aria-label' of the ListBox component.
|
||||||
|
- titleText (union): Provide the title text that will be read by a screen reader when
|
||||||
|
visiting this control Default: ''
|
||||||
|
- items (array) (required): We try to stay as generic as possible here to allow individuals to pass
|
||||||
|
in a collection of whatever kind of data structure they prefer
|
||||||
|
- onChange (func): `onChange` is a utility for this controlled component to communicate to a
|
||||||
|
consuming component what kind of internal state changes are occuring.
|
||||||
|
- light (bool): `true` to use the light version. Default: false
|
||||||
|
- direction (enum): Specify the direction of the dropdown. Can be either top or bottom. Default: 'bottom'
|
||||||
|
- inline (bool): Specify whether you want the inline version of this control
|
||||||
|
"
|
||||||
|
(h/factory-apply Dropdown))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.dropdown.ui-dropdown-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Dropdown/Dropdown.Skeleton.js" :default DropdownSkeleton]))
|
||||||
|
|
||||||
|
(def ui-dropdown-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- inline (bool): Specify whether you want the inline version of this control Default: false
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply DropdownSkeleton))
|
|
@ -0,0 +1,27 @@
|
||||||
|
(ns ch.lyrion.carbon.error-boundary.ui-error-boundary
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ErrorBoundary/ErrorBoundary.js" :default ErrorBoundary]))
|
||||||
|
|
||||||
|
(def ui-error-boundary
|
||||||
|
|
||||||
|
"React introduced additional lifecycle methods in v16 for capturing errors
|
||||||
|
that occur in a specific sub-tree of components. This component helps to
|
||||||
|
consolidate some of the duplication that occurs when using these lifecycle
|
||||||
|
methods across a codebase. In addition, it allows you to specify the fallback
|
||||||
|
UI to display when an error occurs in the sub-tree through the `fallback`
|
||||||
|
prop.
|
||||||
|
|
||||||
|
This component roughly follows the React.js docs example code for these
|
||||||
|
methods. In addition, it takes advantage of an `ErrorBoundaryContext` so that
|
||||||
|
consumers can specify their own logic for logging errors. For example,
|
||||||
|
reporting an error in the UI to an external service for every `ErrorBoundary`
|
||||||
|
used.
|
||||||
|
|
||||||
|
Reference:
|
||||||
|
https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
|
||||||
|
Props:
|
||||||
|
- children (node):
|
||||||
|
- fallback (node):
|
||||||
|
"
|
||||||
|
(h/factory-apply ErrorBoundary))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.factory-helpers
|
||||||
|
(:require
|
||||||
|
;;[goog.object :as gobj]
|
||||||
|
[com.fulcrologic.fulcro.dom :as dom]))
|
||||||
|
|
||||||
|
(defn factory-apply
|
||||||
|
[class]
|
||||||
|
(fn [props & children]
|
||||||
|
(apply js/React.createElement class (clj->js props) children)))
|
||||||
|
|
||||||
|
(defn wrapped-factory-apply
|
||||||
|
"Returns a factory that wraps the given class as an input. Requires that the target item support `:value` as a prop."
|
||||||
|
[class]
|
||||||
|
(let [factory (dom/wrap-form-element class)]
|
||||||
|
(fn [props & children]
|
||||||
|
(apply factory (clj->js props) children))))
|
|
@ -0,0 +1,29 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-file-uploader
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/FileUploader.js" :default FileUploader]))
|
||||||
|
|
||||||
|
(def ui-file-uploader
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- labelTitle (string): Specify the title text of this <FileUploader>
|
||||||
|
- name (string): Provide a name for the underlying <input> node
|
||||||
|
- buttonKind (enum): Specify the type of the <FileUploaderButton> Default: 'primary'
|
||||||
|
- multiple (bool): Specify if the component should accept multiple files to upload Default: false
|
||||||
|
- filenameStatus (enum): Specify the status of the File Upload Default: 'uploading'
|
||||||
|
- labelDescription (string): Specify the description text of this <FileUploader>
|
||||||
|
- className (string): Provide a custom className to be applied to the container node
|
||||||
|
- size (enum): Specify the size of the FileUploaderButton, from a list of available
|
||||||
|
sizes. For `default` buttons, this prop can remain unspecified.
|
||||||
|
- onChange (func): Provide an optional `onChange` hook that is called each time the input is
|
||||||
|
changed
|
||||||
|
- onDelete (func): Provide an optional `onDelete` hook that is called when an uploaded item
|
||||||
|
is removed
|
||||||
|
- iconDescription (string): Provide a description for the complete/close icon that can be read by screen readers Default: 'Provide icon description'
|
||||||
|
- buttonLabel (string): Provide the label text to be read by screen readers when interacting with
|
||||||
|
the <FileUploaderButton> Default: ''
|
||||||
|
- onClick (func): Provide an optional `onClick` hook that is called each time the
|
||||||
|
FileUploader is clicked Default: () => {}
|
||||||
|
- accept (arrayOf): Specify the types of files that this input should be able to receive Default: []
|
||||||
|
"
|
||||||
|
(h/factory-apply FileUploader))
|
|
@ -0,0 +1,31 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/FileUploaderButton.js" :default FileUploaderButton]))
|
||||||
|
|
||||||
|
(def ui-file-uploader-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- role (string): Provide an accessibility role for the <FileUploaderButton> Default: 'button'
|
||||||
|
- tabIndex (number): Provide a custom tabIndex value for the <FileUploaderButton> Default: 0
|
||||||
|
- listFiles (bool): Specify whether you want the component to list the files that have been
|
||||||
|
submitted to be uploaded
|
||||||
|
- disabled (bool): Specify whether file input is disabled Default: false
|
||||||
|
- name (string): Provide a name for the underlying <input> node
|
||||||
|
- buttonKind (enum): Specify the type of underlying button Default: 'primary'
|
||||||
|
- multiple (bool): Specify if the component should accept multiple files to upload Default: false
|
||||||
|
- className (string): Provide a custom className to be applied to the container node
|
||||||
|
- size (enum): Specify the size of the button, from a list of available sizes.
|
||||||
|
For `default` buttons, this prop can remain unspecified.
|
||||||
|
- id (string): Provide a unique id for the underlying <input> node
|
||||||
|
- onChange (func): Provide an optional `onChange` hook that is called each time the <input>
|
||||||
|
value changes Default: function noop() {}
|
||||||
|
- labelText (node): Provide the label text to be read by screen readers when interacting with
|
||||||
|
this control Default: 'Add file'
|
||||||
|
- disableLabelChanges (bool): Specify whether you want to disable any updates to the FileUploaderButton
|
||||||
|
label Default: false
|
||||||
|
- onClick (func): Provide an optional `onClick` hook that is called each time the button is
|
||||||
|
clicked
|
||||||
|
- accept (arrayOf): Specify the types of files that this input should be able to receive
|
||||||
|
"
|
||||||
|
(h/factory-apply FileUploaderButton))
|
|
@ -0,0 +1,22 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-drop-container
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/FileUploaderDropContainer.js" :default FileUploaderDropContainer]))
|
||||||
|
|
||||||
|
(def ui-file-uploader-drop-container
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- role (string): Provide an accessibility role for the <FileUploaderButton>
|
||||||
|
- tabIndex (number): Provide a custom tabIndex value for the <FileUploaderButton> Default: 0
|
||||||
|
- disabled (bool): Specify whether file input is disabled
|
||||||
|
- name (string): Provide a name for the underlying <input> node
|
||||||
|
- multiple (bool): Specify if the component should accept multiple files to upload Default: false
|
||||||
|
- className (string): Provide a custom className to be applied to the container node
|
||||||
|
- id (string): Provide a unique id for the underlying <input> node
|
||||||
|
- onAddFiles (func): Event handler that is called after files are added to the uploader
|
||||||
|
The event handler signature looks like `onAddFiles(evt, { addedFiles })` Default: () => {}
|
||||||
|
- labelText (string): Provide the label text to be read by screen readers when interacting with
|
||||||
|
this control Default: 'Add file'
|
||||||
|
- accept (arrayOf): Specify the types of files that this input should be able to receive Default: []
|
||||||
|
"
|
||||||
|
(h/factory-apply FileUploaderDropContainer))
|
|
@ -0,0 +1,19 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/FileUploaderItem.js" :default FileUploaderItem]))
|
||||||
|
|
||||||
|
(def ui-file-uploader-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- status (enum): Status of the file upload Default: 'uploading'
|
||||||
|
- onDelete (func): Event handler that is called after removing a file from the file uploader
|
||||||
|
The event handler signature looks like `onDelete(evt, { uuid })` Default: () => {}
|
||||||
|
- uuid (string): Unique identifier for the file object
|
||||||
|
- name (string): Name of the uploaded file
|
||||||
|
- iconDescription (string): Description of status icon (displayed in native tooltip)
|
||||||
|
- invalid (bool): Specify if the currently uploaded file is invalid
|
||||||
|
- errorSubject (string): Error message subject for an invalid file upload
|
||||||
|
- errorBody (string): Error message body for an invalid file upload
|
||||||
|
"
|
||||||
|
(h/factory-apply FileUploaderItem))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/FileUploader.Skeleton.js" :default FileUploaderSkeleton]))
|
||||||
|
|
||||||
|
(def ui-file-uploader-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply FileUploaderSkeleton))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.file-uploader.ui-filename
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FileUploader/Filename.js" :default Filename]))
|
||||||
|
|
||||||
|
(def ui-filename
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- iconDescription (string): Provide a description of the SVG icon to denote file upload status Default: 'Uploading file'
|
||||||
|
- status (enum): Status of the file upload Default: 'uploading'
|
||||||
|
- tabIndex (string): Provide a custom tabIndex value for the <Filename> Default: '0'
|
||||||
|
"
|
||||||
|
(h/factory-apply Filename))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.fluid-form.ui-fluid-form
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FluidForm/FluidForm.js" :default FluidForm]))
|
||||||
|
|
||||||
|
(def ui-fluid-form
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Provide children to be rendered inside of the <form> element
|
||||||
|
- className (string): Provide a custom className to be applied on the containing <form> node
|
||||||
|
"
|
||||||
|
(h/factory-apply FluidForm))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.form-group.ui-form-group
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FormGroup/FormGroup.js" :default FormGroup]))
|
||||||
|
|
||||||
|
(def ui-form-group
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- invalid (bool): Specify whether the <FormGroup> is invalid Default: false
|
||||||
|
- message (bool): Specify whether the message should be displayed in the <FormGroup> Default: false
|
||||||
|
- messageText (string): Provide the text for the message in the <FormGroup> Default: ''
|
||||||
|
- children (node): Provide the children form elements to be rendered inside of the <fieldset>
|
||||||
|
- legendText (string) (required): Provide the text to be rendered inside of the fieldset <legend>
|
||||||
|
- className (string): Provide a custom className to be applied to the containing <fieldset> node
|
||||||
|
"
|
||||||
|
(h/factory-apply FormGroup))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.form-item.ui-form-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FormItem/FormItem.js" :default FormItem]))
|
||||||
|
|
||||||
|
(def ui-form-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Provide content to be rendered in the form item
|
||||||
|
- className (string): Provide a custom className to be applied to the containing node
|
||||||
|
"
|
||||||
|
(h/factory-apply FormItem))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.form-label.ui-form-label
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/FormLabel/FormLabel.js" :default FormLabel]))
|
||||||
|
|
||||||
|
(def ui-form-label
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Specify the content of the form label
|
||||||
|
- className (string): Provide a custom className to be applied to the containing <label> node
|
||||||
|
- id (string): Provide a unique id for the given <FormLabel>
|
||||||
|
"
|
||||||
|
(h/factory-apply FormLabel))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.form.ui-form
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Form/Form.js" :default Form]))
|
||||||
|
|
||||||
|
(def ui-form
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Provide children to be rendered inside of the <form> element
|
||||||
|
- className (string): Provide a custom className to be applied on the containing <form> node
|
||||||
|
"
|
||||||
|
(h/factory-apply Form))
|
|
@ -0,0 +1,33 @@
|
||||||
|
(ns ch.lyrion.carbon.grid.ui-column
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Grid/Column.js" :default Column]))
|
||||||
|
|
||||||
|
(def ui-column
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- as (union): Provide a custom element to render instead of the default <div> Default: 'div'
|
||||||
|
- sm (custom): Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
|
||||||
|
This breakpoint supports 4 columns by default.
|
||||||
|
|
||||||
|
@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
|
||||||
|
- md (custom): Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
|
||||||
|
This breakpoint supports 8 columns by default.
|
||||||
|
|
||||||
|
@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
|
||||||
|
- lg (custom): Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
|
||||||
|
This breakpoint supports 16 columns by default.
|
||||||
|
|
||||||
|
@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
|
||||||
|
- xlg (custom): Specify column span for the `xlg` breakpoint (Default breakpoint up to
|
||||||
|
1584px) This breakpoint supports 16 columns by default.
|
||||||
|
|
||||||
|
@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
|
||||||
|
- max (custom): Specify column span for the `max` breakpoint. This breakpoint supports 16
|
||||||
|
columns by default.
|
||||||
|
|
||||||
|
@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
|
||||||
|
- className (string): Specify a custom className to be applied to the `Column`
|
||||||
|
- children (node): Pass in content that will be rendered within the `Column`
|
||||||
|
"
|
||||||
|
(h/factory-apply Column))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.grid.ui-grid
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Grid/Grid.js" :default Grid]))
|
||||||
|
|
||||||
|
(def ui-grid
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- as (union): Provide a custom element to render instead of the default <div> Default: 'div'
|
||||||
|
- condensed (bool): Collapse the gutter to 2px. Useful for fluid layouts.
|
||||||
|
Rows have 2px of margin between them to match gutter. Default: false
|
||||||
|
- fullWidth (bool): Remove the default max width that the grid has set Default: false
|
||||||
|
- className (string): Specify a custom className to be applied to the `Grid`
|
||||||
|
- children (node): Pass in content that will be rendered within the `Grid`
|
||||||
|
"
|
||||||
|
(h/factory-apply Grid))
|
|
@ -0,0 +1,15 @@
|
||||||
|
(ns ch.lyrion.carbon.grid.ui-row
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Grid/Row.js" :default Row]))
|
||||||
|
|
||||||
|
(def ui-row
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- as (union): Provide a custom element to render instead of the default <div> Default: 'div'
|
||||||
|
- condensed (bool): Specify a single row as condensed.Rows that are adjacent
|
||||||
|
and are condensed will have 2px of margin between them to match gutter. Default: false
|
||||||
|
- className (string): Specify a custom className to be applied to the `Row`
|
||||||
|
- children (node): Pass in content that will be rendered within the `Row`
|
||||||
|
"
|
||||||
|
(h/factory-apply Row))
|
|
@ -0,0 +1,22 @@
|
||||||
|
(ns ch.lyrion.carbon.icon.ui-icon
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Icon/Icon.js" :default Icon]))
|
||||||
|
|
||||||
|
(def ui-icon
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- role (string): The `role` attribute. Default: 'img'
|
||||||
|
- description (string) (required): The icon description.
|
||||||
|
- iconRef (func): The `ref` callback for the icon.
|
||||||
|
- fillRule (string): The `<svg>` `fillRule` attribute. Default: 'evenodd'
|
||||||
|
- fill (string): The `<svg>` `fill` attribute.
|
||||||
|
- width (string): The `<svg>` `width` attribute.
|
||||||
|
- icon (shape): The icon data.
|
||||||
|
- className (string): The CSS class name.
|
||||||
|
- style (object): The CSS styles.
|
||||||
|
- iconTitle (string): The icon title.
|
||||||
|
- viewBox (string): The `<svg>` `viewbox` attribute.
|
||||||
|
- height (string): The `<svg>` `height` attribute.
|
||||||
|
"
|
||||||
|
(h/factory-apply Icon))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.icon.ui-icon-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Icon/Icon.Skeleton.js" :default IconSkeleton]))
|
||||||
|
|
||||||
|
(def ui-icon-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- style (object): The CSS styles.
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply IconSkeleton))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.inline-loading.ui-inline-loading
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/InlineLoading/InlineLoading.js" :default InlineLoading]))
|
||||||
|
|
||||||
|
(def ui-inline-loading
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- status (enum): Specify the loading status Default: success ? 'finished' : 'active'
|
||||||
|
- successDelay (number): Provide a delay for the `setTimeout` for success Default: 1500
|
||||||
|
- className (string): Specify a custom className to be applied to the container node
|
||||||
|
- success (custom): Specify whether the load was successful
|
||||||
|
- description (node): Specify the description for the inline loading text
|
||||||
|
- iconDescription (string): Specify the description for the inline loading text
|
||||||
|
- onSuccess (func): Provide an optional handler to be inovked when <InlineLoading> is
|
||||||
|
successful
|
||||||
|
"
|
||||||
|
(h/factory-apply InlineLoading))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.link.ui-link
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Link/Link.js" :default Link]))
|
||||||
|
|
||||||
|
(def ui-link
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Provide the content for the Link
|
||||||
|
- className (string): Provide a custom className to be applied to the containing <a> node
|
||||||
|
- href (string): Provide the `href` attribute for the <a> node
|
||||||
|
- disabled (bool): Specify if the control should be disabled, or not
|
||||||
|
- inline (bool): Specify whether you want the inline version of this control
|
||||||
|
- visited (bool): Specify whether you want the link to receive visited styles after the link has been clicked
|
||||||
|
"
|
||||||
|
(h/factory-apply Link))
|
|
@ -0,0 +1,18 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBox.js" :default ListBox]))
|
||||||
|
|
||||||
|
(def ui-list-box
|
||||||
|
|
||||||
|
"`ListBox` is a generic container component that handles creating the
|
||||||
|
container class name in response to certain props.
|
||||||
|
Props:
|
||||||
|
- disabled (bool): Specify whether the ListBox is currently disabled Default: false
|
||||||
|
- type (custom): Specify the \"type\" of the ListBox. Currently supports either `default` or
|
||||||
|
`inline` as an option. Default: 'default'
|
||||||
|
- children (node): Provide the contents of your ListBox
|
||||||
|
- className (string): Specify a class name to be applied on the containing list box node
|
||||||
|
- size (custom): Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBox))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box-field
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBoxField.js" :default ListBoxField]))
|
||||||
|
|
||||||
|
(def ui-list-box-field
|
||||||
|
|
||||||
|
"`ListBoxField` is responsible for creating the containing node for valid
|
||||||
|
elements inside of a field. It also provides a11y-related attributes like
|
||||||
|
`role` to make sure a user can focus the given field.
|
||||||
|
Props:
|
||||||
|
- children (node): Provide the contents of your ListBoxField
|
||||||
|
- id (string) (required): Specify a custom `id`
|
||||||
|
- disabled (bool): Specify if the parent <ListBox> is disabled
|
||||||
|
- tabIndex (union): Optional prop to specify the tabIndex of the <ListBox> trigger button
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBoxField))
|
|
@ -0,0 +1,15 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box-menu
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBoxMenu.js" :default ListBoxMenu]))
|
||||||
|
|
||||||
|
(def ui-list-box-menu
|
||||||
|
|
||||||
|
"`ListBoxMenu` is a simple container node that isolates the `list-box__menu`
|
||||||
|
class into a single component. It is also being used to validate given
|
||||||
|
`children` components.
|
||||||
|
Props:
|
||||||
|
- children (custom): Provide the contents of your ListBoxMenu
|
||||||
|
- id (string) (required): Specify a custom `id`
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBoxMenu))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box-menu-icon
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBoxMenuIcon.js" :default ListBoxMenuIcon]))
|
||||||
|
|
||||||
|
(def ui-list-box-menu-icon
|
||||||
|
|
||||||
|
"`ListBoxMenuIcon` is used to orient the icon up or down depending on the
|
||||||
|
state of the menu for a given `ListBox`
|
||||||
|
Props:
|
||||||
|
- translateWithId (func): i18n hook used to provide the appropriate description for the given menu
|
||||||
|
icon. This function takes in an id defined in `translationIds` and should
|
||||||
|
return a string message for that given message id. Default: id => defaultTranslations[id]
|
||||||
|
- isOpen (bool) (required): Specify whether the menu is currently open, which will influence the
|
||||||
|
direction of the menu icon
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBoxMenuIcon))
|
|
@ -0,0 +1,17 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box-menu-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBoxMenuItem.js" :default ListBoxMenuItem]))
|
||||||
|
|
||||||
|
(def ui-list-box-menu-item
|
||||||
|
|
||||||
|
"`ListBoxMenuItem` is a helper component for managing the container class
|
||||||
|
name, alongside any classes for any corresponding states, for a generic list
|
||||||
|
box menu item.
|
||||||
|
Props:
|
||||||
|
- isActive (bool): Specify whether the current menu item is \"active\". Default: false
|
||||||
|
- isHighlighted (bool): Specify whether the current menu item is \"highlighed\". Default: false
|
||||||
|
- children (node): Specify any children nodes that hsould be rendered inside of the ListBox
|
||||||
|
Menu Item
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBoxMenuItem))
|
|
@ -0,0 +1,25 @@
|
||||||
|
(ns ch.lyrion.carbon.list-box.ui-list-box-selection
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListBox/ListBoxSelection.js" :default ListBoxSelection]))
|
||||||
|
|
||||||
|
(def ui-list-box-selection
|
||||||
|
|
||||||
|
"`ListBoxSelection` is used to provide controls for clearing a selection, in
|
||||||
|
addition to conditionally rendering a badge if the control has more than one
|
||||||
|
selection.
|
||||||
|
Props:
|
||||||
|
- translateWithId (func): i18n hook used to provide the appropriate description for the given menu
|
||||||
|
icon. This function takes in an id defined in `translationIds` and should
|
||||||
|
return a string message for that given message id. Default: id => defaultTranslations[id]
|
||||||
|
- disabled (bool): Specify whether or not the clear selection element should be disabled
|
||||||
|
- clearSelection (func) (required): Specify a function to be invoked when a user interacts with the clear
|
||||||
|
selection element.
|
||||||
|
- selectionCount (number): Specify an optional `selectionCount` value that will be used to determine
|
||||||
|
whether the selection should display a badge or a single clear icon.
|
||||||
|
- onClick (func): Specify an optional `onClick` handler that is called when the underlying
|
||||||
|
clear selection element is clicked
|
||||||
|
- onKeyDown (func): Specify an optional `onKeyDown` handler that is called when the underlying
|
||||||
|
clear selection element fires a keydown event
|
||||||
|
"
|
||||||
|
(h/factory-apply ListBoxSelection))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.list-item.ui-list-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ListItem/ListItem.js" :default ListItem]))
|
||||||
|
|
||||||
|
(def ui-list-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- children (node): Specify the content for the ListItem
|
||||||
|
- className (string): Specify an optional className to apply to the underlying <li> node
|
||||||
|
"
|
||||||
|
(h/factory-apply ListItem))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.loading.ui-loading
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Loading/Loading.js" :default Loading]))
|
||||||
|
|
||||||
|
(def ui-loading
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- active (bool): Specify whether you want the loading indicator to be spinning or not Default: true
|
||||||
|
- withOverlay (bool): Specify whether you want the loader to be applied with an overlay Default: true
|
||||||
|
- small (bool): Specify whether you would like the small variant of <Loading> Default: false
|
||||||
|
- description (string): Specify an description that would be used to best describe the loading state Default: 'Active loading indicator'
|
||||||
|
- id (string): Provide an `id` to uniquely identify the label
|
||||||
|
- className (string): Provide an optional className to be applied to the containing node
|
||||||
|
"
|
||||||
|
(h/factory-apply Loading))
|
|
@ -0,0 +1,32 @@
|
||||||
|
(ns ch.lyrion.carbon.modal-wrapper.ui-modal-wrapper
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ModalWrapper/ModalWrapper.js" :default ModalWrapper]))
|
||||||
|
|
||||||
|
(def ui-modal-wrapper
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- secondaryButtonText (string): Default: 'Cancel'
|
||||||
|
- children (node):
|
||||||
|
- modalText (string):
|
||||||
|
- disabled (bool): Default: false
|
||||||
|
- passiveModal (bool):
|
||||||
|
- triggerButtonIconDescription (string): Default: 'Provide icon description if icon is used'
|
||||||
|
- handleOpen (func):
|
||||||
|
- handleSubmit (func):
|
||||||
|
- modalHeading (string):
|
||||||
|
- shouldCloseAfterSubmit (bool):
|
||||||
|
- renderTriggerButtonIcon (union):
|
||||||
|
- buttonTriggerClassName (string):
|
||||||
|
- status (string):
|
||||||
|
- id (string):
|
||||||
|
- withHeader (bool):
|
||||||
|
- triggerButtonKind (enum): Default: 'primary'
|
||||||
|
- modalLabel (string):
|
||||||
|
- buttonTriggerText (node):
|
||||||
|
- onKeyDown (null): null Default: () => {}
|
||||||
|
- selectorPrimaryFocus (null): null Default: '[data-modal-primary-focus]'
|
||||||
|
- modalBeforeContent (bool):
|
||||||
|
- primaryButtonText (string): Default: 'Save'
|
||||||
|
"
|
||||||
|
(h/factory-apply ModalWrapper))
|
|
@ -0,0 +1,42 @@
|
||||||
|
(ns ch.lyrion.carbon.modal.ui-modal
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Modal/Modal.js" :default Modal]))
|
||||||
|
|
||||||
|
(def ui-modal
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- secondaryButtonText (string): Specify the text for the secondary button
|
||||||
|
- selectorsFloatingMenus (arrayOf): Specify CSS selectors that match DOM elements working as floating menus.
|
||||||
|
Focusing on those elements won't trigger \"focus-wrap\" behavior
|
||||||
|
- open (bool): Specify whether the Modal is currently open
|
||||||
|
- focusTrap (custom): Deprecated; Used for advanced focus-wrapping feature using 3rd party library,
|
||||||
|
but it's now achieved without a 3rd party library.
|
||||||
|
- children (node): Provide the contents of your Modal
|
||||||
|
- passiveModal (bool): Specify whether the modal should be button-less Default: false
|
||||||
|
- modalHeading (node): Specify the content of the modal header title. Default: ''
|
||||||
|
- onRequestSubmit (func): Specify a handler for \"submitting\" modal.
|
||||||
|
The handler should care of closing modal, e.g. changing `open` prop, if necessary. Default: () => {}
|
||||||
|
- primaryButtonDisabled (bool): Specify whether the Button should be disabled, or not Default: false
|
||||||
|
- onRequestClose (func): Specify a handler for closing modal.
|
||||||
|
The handler should care of closing modal, e.g. changing `open` prop. Default: () => {}
|
||||||
|
- shouldSubmitOnEnter (bool): Specify if Enter key should be used as \"submit\" action
|
||||||
|
- className (string): Specify an optional className to be applied to the modal root node
|
||||||
|
- size (enum): Specify the size variant.
|
||||||
|
- onSecondarySubmit (func): Specify a handler for the secondary button.
|
||||||
|
Useful if separate handler from `onRequestClose` is desirable
|
||||||
|
- danger (bool): Specify whether the Modal is for dangerous actions
|
||||||
|
- hasScrollingContent (bool): Specify whether the modal contains scrolling content Default: false
|
||||||
|
- id (string): Specify the DOM element ID of the top-level node.
|
||||||
|
- modalLabel (node): Specify the content of the modal header label. Default: ''
|
||||||
|
- modalAriaLabel (string): Specify a label to be read by screen readers on the modal root node
|
||||||
|
- aria-label (custom): Required props for the accessibility label of the header
|
||||||
|
- onKeyDown (func): Specify a handler for keypresses. Default: () => {}
|
||||||
|
- selectorPrimaryFocus (string): Specify a CSS selector that matches the DOM element that should
|
||||||
|
be focused when the Modal opens Default: '[data-modal-primary-focus]'
|
||||||
|
- hasForm (bool): Provide whether the modal content has a form element.
|
||||||
|
If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
|
||||||
|
- iconDescription (string): Provide a description for \"close\" icon that can be read by screen readers Default: 'Close'
|
||||||
|
- primaryButtonText (string): Specify the text for the primary button
|
||||||
|
"
|
||||||
|
(h/factory-apply Modal))
|
|
@ -0,0 +1,41 @@
|
||||||
|
(ns ch.lyrion.carbon.multi-select.ui-filterable-multi-select
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/MultiSelect/FilterableMultiSelect.js" :default FilterableMultiSelect]))
|
||||||
|
|
||||||
|
(def ui-filterable-multi-select
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- useTitleInItem (bool): Specify title to show title on hover
|
||||||
|
- open (bool): Initialize the component with an open(`true`)/closed(`false`) menu. Default: false
|
||||||
|
- invalidText (string): If invalid, what is the error?
|
||||||
|
- placeholder (string) (required): Generic `placeholder` that will be used as the textual representation of
|
||||||
|
what this field is for
|
||||||
|
- disabled (bool): Disable the control Default: false
|
||||||
|
- translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title
|
||||||
|
- locale (string): Specify the locale of the control. Used for the default `compareItems`
|
||||||
|
used for sorting the list of items in the control. Default: 'en'
|
||||||
|
- invalid (bool): Is the current selection invalid?
|
||||||
|
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
|
||||||
|
- initialSelectedItems (array): Allow users to pass in arbitrary items from their collection that are
|
||||||
|
pre-selected Default: []
|
||||||
|
- selectionFeedback (enum): Specify feedback (mode) of the selection.
|
||||||
|
`top`: selected item jumps to top
|
||||||
|
`fixed`: selected item stays at it's position
|
||||||
|
`top-after-reopen`: selected item jump to top after reopen dropdown Default: 'top-after-reopen'
|
||||||
|
- downshiftProps (shape): Additional props passed to Downshift
|
||||||
|
- id (string) (required): Specify a custom `id`
|
||||||
|
- itemToString (func): Helper function passed to downshift that allows the library to render a
|
||||||
|
given item to a string label. By default, it extracts the `label` field
|
||||||
|
from a given item to serve as the item label in the list. Default: defaultItemToString
|
||||||
|
- sortItems (null): null Default: defaultSortItems
|
||||||
|
- ariaLabel (string): 'aria-label' of the ListBox component. Default: 'Choose an item'
|
||||||
|
- items (array) (required): We try to stay as generic as possible here to allow individuals to pass
|
||||||
|
in a collection of whatever kind of data structure they prefer
|
||||||
|
- filterItems (null): null Default: defaultFilterItems
|
||||||
|
- compareItems (null): null Default: defaultCompareItems
|
||||||
|
- onChange (func): `onChange` is a utility for this controlled component to communicate to a
|
||||||
|
consuming component what kind of internal state changes are occuring.
|
||||||
|
- light (bool): `true` to use the light version. Default: false
|
||||||
|
"
|
||||||
|
(h/factory-apply FilterableMultiSelect))
|
|
@ -0,0 +1,42 @@
|
||||||
|
(ns ch.lyrion.carbon.multi-select.ui-multi-select
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/MultiSelect/MultiSelect.js" :default MultiSelect]))
|
||||||
|
|
||||||
|
(def ui-multi-select
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- useTitleInItem (bool): Specify title to show title on hover
|
||||||
|
- open (bool): Initialize the component with an open(`true`)/closed(`false`) menu. Default: false
|
||||||
|
- invalidText (string): If invalid, what is the error?
|
||||||
|
- disabled (bool): Disable the control Default: false
|
||||||
|
- translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title
|
||||||
|
- locale (string): Specify the locale of the control. Used for the default `compareItems`
|
||||||
|
used for sorting the list of items in the control. Default: 'en'
|
||||||
|
- type (enum): Specify 'inline' to create an inline multi-select. Default: 'default'
|
||||||
|
- invalid (bool): Is the current selection invalid?
|
||||||
|
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
|
||||||
|
- title (null): null Default: false
|
||||||
|
- initialSelectedItems (array): Allow users to pass in arbitrary items from their collection that are
|
||||||
|
pre-selected Default: []
|
||||||
|
- selectionFeedback (enum): Specify feedback (mode) of the selection.
|
||||||
|
`top`: selected item jumps to top
|
||||||
|
`fixed`: selected item stays at it's position
|
||||||
|
`top-after-reopen`: selected item jump to top after reopen dropdown Default: 'top-after-reopen'
|
||||||
|
- downshiftProps (shape): Additional props passed to Downshift
|
||||||
|
- label (node) (required): Generic `label` that will be used as the textual representation of what
|
||||||
|
this field is for
|
||||||
|
- id (string) (required): Specify a custom `id`
|
||||||
|
- itemToString (func): Helper function passed to downshift that allows the library to render a
|
||||||
|
given item to a string label. By default, it extracts the `label` field
|
||||||
|
from a given item to serve as the item label in the list. Default: defaultItemToString
|
||||||
|
- sortItems (null): null Default: defaultSortItems
|
||||||
|
- items (array) (required): We try to stay as generic as possible here to allow individuals to pass
|
||||||
|
in a collection of whatever kind of data structure they prefer
|
||||||
|
- compareItems (null): null Default: defaultCompareItems
|
||||||
|
- onChange (func): `onChange` is a utility for this controlled component to communicate to a
|
||||||
|
consuming component what kind of internal state changes are occuring.
|
||||||
|
- light (bool): `true` to use the light version. Default: false
|
||||||
|
- direction (enum): Specify the direction of the multiselect dropdown. Can be either top or bottom. Default: 'bottom'
|
||||||
|
"
|
||||||
|
(h/factory-apply MultiSelect))
|
|
@ -0,0 +1,10 @@
|
||||||
|
(ns ch.lyrion.carbon.notification.ui-a11y-warning-icon
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Notification/a11yIconWarningSolid.js" :default a11yWarningIcon]))
|
||||||
|
|
||||||
|
(def ui-a11y-warning-icon
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
"
|
||||||
|
(h/factory-apply a11yWarningIcon))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.notification.ui-notification-action-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Notification/Notification.js" :default NotificationActionButton]))
|
||||||
|
|
||||||
|
(def ui-notification-action-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to be applied to the notification action button
|
||||||
|
- children (node): Specify the content of the notification action button.
|
||||||
|
- onClick (func): Optionally specify a click handler for the notification action button.
|
||||||
|
"
|
||||||
|
(h/factory-apply NotificationActionButton))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.number-input.ui-number-input-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/NumberInput/NumberInput.Skeleton.js" :default NumberInputSkeleton]))
|
||||||
|
|
||||||
|
(def ui-number-input-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- hideLabel (bool): Specify whether the label should be hidden, or not
|
||||||
|
- className (string): Specify an optional className to add to the form item wrapper.
|
||||||
|
"
|
||||||
|
(h/factory-apply NumberInputSkeleton))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.ordered-list.ui-ordered-list
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/OrderedList/OrderedList.js" :default OrderedList]))
|
||||||
|
|
||||||
|
(def ui-ordered-list
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- nested (bool): Specify whether this ordered list is nested inside of another nested list Default: false
|
||||||
|
- children (node): Provide list items to be rendered in the ordered list
|
||||||
|
- className (string): Provide an optional className to be applied to the containing <ol> node
|
||||||
|
"
|
||||||
|
(h/factory-apply OrderedList))
|
|
@ -0,0 +1,29 @@
|
||||||
|
(ns ch.lyrion.carbon.overflow-menu-item.ui-overflow-menu-item
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/OverflowMenuItem/OverflowMenuItem.js" :default OverflowMenuItem]))
|
||||||
|
|
||||||
|
(def ui-overflow-menu-item
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- itemText (node): The text in the menu item. Default: 'Provide itemText'
|
||||||
|
- requireTitle (bool): `true` if this menu item has long text and requires a browser tooltip
|
||||||
|
- wrapperClassName (string): The CSS class name to be placed on the wrapper list item element
|
||||||
|
- primaryFocus (bool): `true` if this menu item should get focus when the menu gets open.
|
||||||
|
- disabled (bool): `true` to make this menu item disabled. Default: false
|
||||||
|
- closeMenu (func): A callback to tell the parent menu component that the menu should be closed.
|
||||||
|
- onMouseEnter (func):
|
||||||
|
- onMouseDown (func):
|
||||||
|
- onBlur (func): event handlers
|
||||||
|
- hasDivider (bool): `true` to make this menu item a divider. Default: false
|
||||||
|
- className (string): The CSS class name to be placed on the button element
|
||||||
|
- onKeyUp (func):
|
||||||
|
- isDelete (bool): `true` to make this menu item a \"danger button\". Default: false
|
||||||
|
- onMouseLeave (func):
|
||||||
|
- onKeyDown (func): Default: () => {}
|
||||||
|
- onClick (func): Default: () => {}
|
||||||
|
- href (string): If given, overflow item will render as a link with the given href
|
||||||
|
- onFocus (func):
|
||||||
|
- onMouseUp (func):
|
||||||
|
"
|
||||||
|
(h/factory-apply OverflowMenuItem))
|
|
@ -0,0 +1,30 @@
|
||||||
|
(ns ch.lyrion.carbon.pagination.ui-pagination
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Pagination/Pagination.js" :default Pagination]))
|
||||||
|
|
||||||
|
(def ui-pagination
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- backwardText (string): The description for the backward icon. Default: 'Previous page'
|
||||||
|
- itemText (func): A variant of `itemRangeText`, used if the total number of items is unknown. Default: (min, max) => `${min}–${max} items`
|
||||||
|
- itemRangeText (func): The function returning a translatable text showing where the current page is,
|
||||||
|
in a manner of the range of items. Default: (min, max, total) => `${min}–${max} of ${total} items`
|
||||||
|
- disabled (bool): `true` if the backward/forward buttons should be disabled. Default: false
|
||||||
|
- pageText (func): The translatable text showing the current page. Default: page => `page ${page}`
|
||||||
|
- isLastPage (bool): `true` if the current page should be the last page. Default: false
|
||||||
|
- page (number): The current page. Default: 1
|
||||||
|
- pageInputDisabled (bool): `true` if the select box to change the page should be disabled. Default: false
|
||||||
|
- totalItems (number): The total number of items.
|
||||||
|
- forwardText (string): The description for the forward icon. Default: 'Next page'
|
||||||
|
- className (string): The CSS class names.
|
||||||
|
- pageSizes (arrayOf) (required): The choices for `pageSize`.
|
||||||
|
- pageSize (number): The number dictating how many items a page contains.
|
||||||
|
- id (union): The unique ID of this component instance.
|
||||||
|
- pageRangeText (func): A function returning PII showing where the current page is. Default: (current, total) => `of ${total} pages`
|
||||||
|
- pagesUnknown (bool): `true` if the total number of items is unknown. Default: false
|
||||||
|
- itemsPerPageText (string): The translatable text indicating the number of items per page. Default: 'Items per page:'
|
||||||
|
- onChange (func): The callback function called when the current page changes.
|
||||||
|
- pageNumberText (string): Default: 'Page Number'
|
||||||
|
"
|
||||||
|
(h/factory-apply Pagination))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.pagination.ui-pagination-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Pagination/Pagination.Skeleton.js" :default PaginationSkeleton]))
|
||||||
|
|
||||||
|
(def ui-pagination-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply PaginationSkeleton))
|
|
@ -0,0 +1,10 @@
|
||||||
|
(ns ch.lyrion.carbon.primary-button.ui-primary-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/PrimaryButton/PrimaryButton.js" :default PrimaryButton]))
|
||||||
|
|
||||||
|
(def ui-primary-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
"
|
||||||
|
(h/factory-apply PrimaryButton))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.progress-indicator.ui-progress-indicator-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js" :default ProgressIndicatorSkeleton]))
|
||||||
|
|
||||||
|
(def ui-progress-indicator-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply ProgressIndicatorSkeleton))
|
|
@ -0,0 +1,27 @@
|
||||||
|
(ns ch.lyrion.carbon.progress-indicator.ui-progress-step
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator.js" :default ProgressStep]))
|
||||||
|
|
||||||
|
(def ui-progress-step
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- description (string): Provide a description for the <ProgressStep>
|
||||||
|
- index (number): Index of the current step within the ProgressIndicator
|
||||||
|
- disabled (bool): Specify whether the step is disabled
|
||||||
|
- translateWithId (func): Optional method that takes in a message id and returns an
|
||||||
|
internationalized string. Default: function translateWithId(messageId) {
|
||||||
|
return defaultTranslations[messageId];
|
||||||
|
}
|
||||||
|
- invalid (bool): Specify whether the step is invalid
|
||||||
|
- className (string): Provide an optional className to be applied to the containing <li> node
|
||||||
|
- label (node) (required): Provide the label for the <ProgressStep>
|
||||||
|
- current (bool): Specify whether the step is the current step
|
||||||
|
- tooltipId (string): The ID of the tooltip content.
|
||||||
|
- complete (bool): Specify whether the step has been completed
|
||||||
|
- secondaryLabel (string): Provide an optional secondary label
|
||||||
|
- renderLabel (func): Default: props => <p {...props} />
|
||||||
|
- onClick (func): A callback called if the step is clicked or the enter key is pressed
|
||||||
|
- overflowTooltipProps (object): Provide the props that describe a progress step tooltip
|
||||||
|
"
|
||||||
|
(h/factory-apply ProgressStep))
|
|
@ -0,0 +1,20 @@
|
||||||
|
(ns ch.lyrion.carbon.radio-button-group.ui-radio-button-group
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/RadioButtonGroup/RadioButtonGroup.js" :default RadioButtonGroup]))
|
||||||
|
|
||||||
|
(def ui-radio-button-group
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- labelPosition (enum): Provide where label text should be placed Default: 'right'
|
||||||
|
- children (node): Provide a collection of <RadioButton> components to render in the group
|
||||||
|
- disabled (bool): Specify whether the group is disabled
|
||||||
|
- name (string) (required): Specify the name of the underlying <input> nodes
|
||||||
|
- orientation (enum): Provide where radio buttons should be placed Default: 'horizontal'
|
||||||
|
- className (string): Provide an optional className to be applied to the container node
|
||||||
|
- valueSelected (union): Specify the value that is currently selected in the group
|
||||||
|
- onChange (func): Provide an optional `onChange` hook that is called whenever the value of
|
||||||
|
the group changes Default: () => {}
|
||||||
|
- defaultSelected (union): Specify the <RadioButton> to be selected by default
|
||||||
|
"
|
||||||
|
(h/factory-apply RadioButtonGroup))
|
|
@ -0,0 +1,11 @@
|
||||||
|
(ns ch.lyrion.carbon.radio-button.ui-radio-button-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/RadioButton/RadioButton.Skeleton.js" :default RadioButtonSkeleton]))
|
||||||
|
|
||||||
|
(def ui-radio-button-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply RadioButtonSkeleton))
|
|
@ -0,0 +1,20 @@
|
||||||
|
(ns ch.lyrion.carbon.radio-tile.ui-radio-tile
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/RadioTile/RadioTile.js" :default RadioTile]))
|
||||||
|
|
||||||
|
(def ui-radio-tile
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- tabIndex (number): Specify the tab index of the wrapper element Default: 0
|
||||||
|
- name (string): The `name` of the `<input>`.
|
||||||
|
- value (union) (required): The `value` of the `<input>`.
|
||||||
|
- className (string): The CSS class names.
|
||||||
|
- defaultChecked (bool): `true` if the `<input>` should be checked at initialization.
|
||||||
|
- id (string): The ID of the `<input>`.
|
||||||
|
- checked (bool): `true` if this tile should be selected.
|
||||||
|
- onChange (func): The handler of the massaged `change` event on the `<input>`. Default: () => {}
|
||||||
|
- light (bool): `true` to use the light version. Default: false
|
||||||
|
- iconDescription (custom): The description of the tile checkmark icon.
|
||||||
|
"
|
||||||
|
(h/factory-apply RadioTile))
|
|
@ -0,0 +1,13 @@
|
||||||
|
(ns ch.lyrion.carbon.search-filter-button.ui-search-filter-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/SearchFilterButton/SearchFilterButton.js" :default SearchFilterButton]))
|
||||||
|
|
||||||
|
(def ui-search-filter-button
|
||||||
|
|
||||||
|
"The filter button for `<Search>`.
|
||||||
|
Props:
|
||||||
|
- labelText (string): The a11y label text. Default: 'Search'
|
||||||
|
- iconDescription (string): The icon description. Default: 'filter'
|
||||||
|
"
|
||||||
|
(h/factory-apply SearchFilterButton))
|
|
@ -0,0 +1,16 @@
|
||||||
|
(ns ch.lyrion.carbon.search-layout-button.ui-search-layout-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/SearchLayoutButton/SearchLayoutButton.js" :default SearchLayoutButton]))
|
||||||
|
|
||||||
|
(def ui-search-layout-button
|
||||||
|
|
||||||
|
"The layout button for `<Search>`.
|
||||||
|
Props:
|
||||||
|
- labelText (string): The a11y label text. Default: 'Filter'
|
||||||
|
- iconDescriptionList (string): The description for the \"list\" icon. Default: 'list'
|
||||||
|
- iconDescriptionGrid (string): The description for the \"grid\" icon. Default: 'grid'
|
||||||
|
- format (enum): The layout.
|
||||||
|
- onChangeFormat (func): The callback called when layout switches.
|
||||||
|
"
|
||||||
|
(h/factory-apply SearchLayoutButton))
|
|
@ -0,0 +1,24 @@
|
||||||
|
(ns ch.lyrion.carbon.search.ui-search
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Search/Search.js" :default Search]))
|
||||||
|
|
||||||
|
(def ui-search
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- value (union): Specify the value of the <input>
|
||||||
|
- closeButtonLabelText (string): Specify a label to be read by screen readers on the \"close\" button Default: 'Clear search input'
|
||||||
|
- type (string): Optional prop to specify the type of the `<input>` Default: 'text'
|
||||||
|
- className (string): Specify an optional className to be applied to the container node
|
||||||
|
- size (enum): Specify the search size
|
||||||
|
- small (custom): Specify whether the load was successful
|
||||||
|
- id (string): Specify a custom `id` for the input
|
||||||
|
- defaultValue (union): Optionally provide the default value of the <input>
|
||||||
|
- placeHolderText (string): Provide an optional placeholder text for the Search.
|
||||||
|
Note: if the label and placeholder differ,
|
||||||
|
VoiceOver on Mac will read both Default: ''
|
||||||
|
- onChange (null): null Default: () => {}
|
||||||
|
- light (bool): Specify light version or default version of this control
|
||||||
|
- labelText (node) (required): Provide an optional label text for the Search icon
|
||||||
|
"
|
||||||
|
(h/wrapped-factory-apply Search))
|
|
@ -0,0 +1,12 @@
|
||||||
|
(ns ch.lyrion.carbon.search.ui-search-skeleton
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/Search/Search.Skeleton.js" :default SearchSkeleton]))
|
||||||
|
|
||||||
|
(def ui-search-skeleton
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- small (bool): Specify whether the Search should be a small variant Default: false
|
||||||
|
- className (string): Specify an optional className to add.
|
||||||
|
"
|
||||||
|
(h/factory-apply SearchSkeleton))
|
|
@ -0,0 +1,10 @@
|
||||||
|
(ns ch.lyrion.carbon.secondary-button.ui-secondary-button
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/SecondaryButton/SecondaryButton.js" :default SecondaryButton]))
|
||||||
|
|
||||||
|
(def ui-secondary-button
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
"
|
||||||
|
(h/factory-apply SecondaryButton))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(ns ch.lyrion.carbon.select-item-group.ui-select-item-group
|
||||||
|
(:require
|
||||||
|
[ch.lyrion.carbon.factory-helpers :as h]
|
||||||
|
["carbon-components-react/lib/components/SelectItemGroup/SelectItemGroup.js" :default SelectItemGroup]))
|
||||||
|
|
||||||
|
(def ui-select-item-group
|
||||||
|
|
||||||
|
"Props:
|
||||||
|
- disabled (bool): Specify whether the <SelectItemGroup> should be disabled Default: false
|
||||||
|
- label (string): Specify the label to be displayed Default: 'Provide label'
|
||||||
|
- children (node): Provide the contents of your <SelectItemGroup>
|
||||||
|
- className (string): Specify an optional className to be applied to the node
|
||||||
|
"
|
||||||
|
(h/factory-apply SelectItemGroup))
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue