diff --git a/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap new file mode 100644 index 0000000..344e751 --- /dev/null +++ b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap @@ -0,0 +1,1851 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox Group should render correctly 1`] = ` +initialize { + "0": Object { + "attribs": Object { + "class": "group ", + }, + "children": Array [ + Object { + "attribs": Object { + "class": "", + }, + "children": Array [ + Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "label", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .group :global(label) { + margin-right: 1.875rem; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + .group :global(label) { + margin-right: 1.875rem; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "", + }, + "children": Array [ + Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "label", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "div", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "root": Object { + "attribs": Object {}, + "children": Array [ + [Circular], + ], + "name": "root", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "type": "root", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "_root": [Circular], + "length": 1, + "options": Object { + "decodeEntities": true, + "normalizeWhitespace": false, + "withDomLvl1": true, + "xml": false, + }, +} +`; diff --git a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..0902df4 --- /dev/null +++ b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,907 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox should render correctly 1`] = ` +initialize { + "0": Object { + "attribs": Object { + "class": "", + }, + "children": Array [ + Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": [Circular], + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": [Circular], + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + label { + height: .875rem; + line-height: .875rem; + display: inline-flex; + justify-content: center; + align-items: center; + width: auto; + cursor: pointer; + opacity: 1;; + } + + .text { + font-size: .875rem; + line-height: .875rem; + padding-left: .5rem; + user-select: none; + cursor: pointer; + } + + input { + opacity: 0; + outline: none; + position: absolute; + width: 0; + height: 0; + margin: 0; + padding: 0; + z-index: -1; + background-color: transparent; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": [Circular], + "prev": Object { + "attribs": Object { + "class": "text", + }, + "children": Array [ + Object { + "data": "Sydney", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "span", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "type": "checkbox", + }, + "children": Array [], + "name": "input", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object {}, + "children": Array [ + Object { + "data": " + svg { + display: inline-flex; + width: 12px; + height: 12px; + user-select: none; + opacity: 1; + cursor: pointer; + } + ", + "next": null, + "parent": [Circular], + "prev": null, + "type": "text", + }, + ], + "name": "style", + "namespace": "http://www.w3.org/1999/xhtml", + "next": [Circular], + "parent": [Circular], + "prev": Object { + "attribs": Object { + "fill": "none", + "height": "12px", + "viewBox": "0 0 12 12", + "width": "12px", + "xmlns": "http://www.w3.org/2000/svg", + }, + "children": Array [ + Object { + "attribs": Object { + "d": "M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z", + "stroke": "#666", + }, + "children": Array [], + "name": "path", + "namespace": "http://www.w3.org/2000/svg", + "next": null, + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "d": undefined, + "stroke": undefined, + }, + "x-attribsPrefix": Object { + "d": undefined, + "stroke": undefined, + }, + }, + ], + "name": "svg", + "namespace": "http://www.w3.org/2000/svg", + "next": [Circular], + "parent": [Circular], + "prev": null, + "type": "tag", + "x-attribsNamespace": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "http://www.w3.org/2000/xmlns/", + }, + "x-attribsPrefix": Object { + "fill": undefined, + "height": undefined, + "viewBox": undefined, + "width": undefined, + "xmlns": "", + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "type": undefined, + }, + "x-attribsPrefix": Object { + "type": undefined, + }, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "type": "style", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + ], + "name": "label", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "root": Object { + "attribs": Object {}, + "children": Array [ + [Circular], + ], + "name": "root", + "namespace": "http://www.w3.org/1999/xhtml", + "next": null, + "parent": null, + "prev": null, + "type": "root", + "x-attribsNamespace": Object {}, + "x-attribsPrefix": Object {}, + }, + "type": "tag", + "x-attribsNamespace": Object { + "class": undefined, + }, + "x-attribsPrefix": Object { + "class": undefined, + }, + }, + "_root": [Circular], + "length": 1, + "options": Object { + "decodeEntities": true, + "normalizeWhitespace": false, + "withDomLvl1": true, + "xml": false, + }, +} +`; diff --git a/components/checkbox/__tests__/group.test.tsx b/components/checkbox/__tests__/group.test.tsx new file mode 100644 index 0000000..a681214 --- /dev/null +++ b/components/checkbox/__tests__/group.test.tsx @@ -0,0 +1,102 @@ +import React from 'react' +import { mount, render } from 'enzyme' +import { Checkbox } from '../../index' + +describe('Checkbox Group', () => { + it('should render correctly', () => { + const wrapper = mount( + + Sydney + + ) + expect(() => wrapper.unmount()).not.toThrow() + const rendered = render( + + Sydney + + ) + expect(rendered).toMatchSnapshot() + }) + + it('should work correctly with initial value', () => { + let wrapper = mount( + + Sydney + BeiJing + + ) + const sydney = wrapper.find('input').at(0).getDOMNode() + expect((sydney as HTMLInputElement).checked).toBeTruthy() + const beijing = wrapper.find('input').at(1).getDOMNode() + expect((beijing as HTMLInputElement).checked).not.toBeTruthy() + }) + + it('should change value after click', () => { + let value = ['sydney'] + const wrapper = mount( + value = val}> + Sydney + BeiJing + + ) + const sydney = wrapper.find('input').at(0) + sydney.simulate('change') + expect(value.length).toBe(0) + + const beijing = wrapper.find('input').at(1) + beijing.simulate('change') + expect(value).toEqual( + expect.arrayContaining(['beijing']) + ) + }) + + it('should ignore events when disabled', () => { + let value = ['sydney'] + const wrapper = mount( + value = val}> + Sydney + BeiJing + + ) + const sydney = wrapper.find('input').at(0) + sydney.simulate('change') + expect(value.length).not.toBe(0) + + const beijing = wrapper.find('input').at(1) + beijing.simulate('change') + expect(value).not.toEqual( + expect.arrayContaining(['beijing']) + ) + }) + + it('should throw error when value missing', () => { + let errorMessage = '' + const Group = Checkbox.Group as any + const errorSpy = jest.spyOn(console, 'error') + .mockImplementation(msg => errorMessage = msg) + mount( + + Sydney + BeiJing + + ) + + expect(errorMessage).toContain('required') + errorSpy.mockRestore() + }) + + it('should throw error when set check prop in group', () => { + let errorMessage = '' + const errorSpy = jest.spyOn(console, 'error') + .mockImplementation(msg => errorMessage = msg) + mount( + + Sydney + BeiJing + + ) + + expect(errorMessage.toLowerCase()).toContain('remove props') + errorSpy.mockRestore() + }) +}) diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx new file mode 100644 index 0000000..2e1f471 --- /dev/null +++ b/components/checkbox/__tests__/index.test.tsx @@ -0,0 +1,64 @@ +import React from 'react' +import { mount, render } from 'enzyme' +import { Checkbox } from '../../index' + +describe('Checkbox', () => { + it('should render correctly', () => { + const wrapper = mount( + Sydney + ) + expect(() => wrapper.unmount()).not.toThrow() + const rendered = render(Sydney) + expect(rendered).toMatchSnapshot() + }) + + it('should work correctly with initial value', () => { + let wrapper = mount(Sydney) + let input = wrapper.find('input').getDOMNode() + expect((input as HTMLInputElement).checked).toBeTruthy() + + wrapper = mount(Sydney) + input = wrapper.find('input').getDOMNode() + expect((input as HTMLInputElement).checked).not.toBeTruthy() + + wrapper = mount(Sydney) + input = wrapper.find('input').getDOMNode() + expect((input as HTMLInputElement).checked).toBeTruthy() + + wrapper = mount(Sydney) + input = wrapper.find('input').getDOMNode() + expect((input as HTMLInputElement).checked).not.toBeTruthy() + }) + + it('should change value after click', () => { + const Wrapper = () => { + const [state, setState] = React.useState('state1') + + return ( + setState('state2')}> + {state} + + ) + } + const wrapper = mount() + const input = wrapper.find('input').at(0) + input.simulate('change') + expect(wrapper.find('.text').text()).toContain('state2') + }) + + it('should ignore events when disabled', () => { + const Wrapper = () => { + const [state, setState] = React.useState('state1') + + return ( + setState('state2')}> + {state} + + ) + } + const wrapper = mount() + const input = wrapper.find('input').at(0) + input.simulate('change') + expect(wrapper.find('.text').text()).not.toContain('state2') + }) +}) diff --git a/components/checkbox/checkbox-context.ts b/components/checkbox/checkbox-context.ts index d30a049..685b390 100644 --- a/components/checkbox/checkbox-context.ts +++ b/components/checkbox/checkbox-context.ts @@ -1,7 +1,7 @@ import React from 'react' export interface CheckboxConfig { - updateState: (value: string, checked: boolean) => void + updateState?: (value: string, checked: boolean) => void disabledAll: boolean values: string[] inGroup: boolean @@ -9,7 +9,6 @@ export interface CheckboxConfig { const defaultContext = { disabledAll: false, - updateState: () => {}, inGroup: false, values: [], } diff --git a/components/checkbox/checkbox.tsx b/components/checkbox/checkbox.tsx index ca3420d..91be8e1 100644 --- a/components/checkbox/checkbox.tsx +++ b/components/checkbox/checkbox.tsx @@ -41,13 +41,6 @@ const Checkbox: React.FC = React.memo(({ const { updateState, inGroup, disabledAll, values } = useCheckbox() const isDisabled = inGroup ? disabledAll || disabled : disabled - if (inGroup && !value) { - useWarning( - 'Props "value" must be set when [Checkbox] component is in the group.', - 'Checkbox', - ) - } - if (inGroup && checked) { useWarning( 'Remove props "checked" when [Checkbox] component is in the group.',