@abgov/react-components 4.0.0-alpha.36 → 4.0.0-alpha.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { FC, ReactNode } from 'react';
|
|
2
|
-
declare type ContainerVariant = '
|
|
2
|
+
declare type ContainerVariant = 'interactive' | 'non-interactive' | 'info' | 'error' | 'success' | 'warning';
|
|
3
3
|
declare type HeadingSize = 'large' | 'small' | 'none';
|
|
4
4
|
declare type ContainerPadding = "relaxed" | "compact";
|
|
5
5
|
interface WCProps {
|
|
6
|
-
variant
|
|
7
|
-
headingsize
|
|
8
|
-
colored
|
|
9
|
-
padding
|
|
6
|
+
variant?: ContainerVariant;
|
|
7
|
+
headingsize?: HeadingSize;
|
|
8
|
+
colored?: boolean;
|
|
9
|
+
padding?: ContainerPadding;
|
|
10
10
|
}
|
|
11
11
|
declare global {
|
|
12
12
|
namespace JSX {
|
|
@@ -16,11 +16,11 @@ declare global {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
interface Props {
|
|
19
|
-
headingSize
|
|
19
|
+
headingSize?: HeadingSize;
|
|
20
20
|
variant?: ContainerVariant;
|
|
21
21
|
title?: ReactNode;
|
|
22
22
|
colored?: boolean;
|
|
23
|
-
padding
|
|
23
|
+
padding?: ContainerPadding;
|
|
24
24
|
actions?: ReactNode;
|
|
25
25
|
}
|
|
26
26
|
export declare const GoAContainer: FC<Props>;
|
package/package.json
CHANGED
package/react-components.esm.js
CHANGED
|
@@ -4059,7 +4059,7 @@ function instance$p($$self, $$props, $$invalidate) {
|
|
|
4059
4059
|
class Container extends SvelteElement {
|
|
4060
4060
|
constructor(options) {
|
|
4061
4061
|
super();
|
|
4062
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title
|
|
4062
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
|
|
4063
4063
|
init(this, {
|
|
4064
4064
|
target: this.shadowRoot,
|
|
4065
4065
|
props: attribute_to_object(this.attributes),
|
|
@@ -14245,10 +14245,10 @@ const GoAContainer = ({
|
|
|
14245
14245
|
padding,
|
|
14246
14246
|
children,
|
|
14247
14247
|
actions,
|
|
14248
|
-
variant
|
|
14248
|
+
variant
|
|
14249
14249
|
}) => {
|
|
14250
14250
|
return jsxs("goa-container", Object.assign({
|
|
14251
|
-
variant:
|
|
14251
|
+
variant: variant,
|
|
14252
14252
|
padding: padding,
|
|
14253
14253
|
headingsize: headingSize,
|
|
14254
14254
|
colored: _colored
|
package/react-components.umd.js
CHANGED
|
@@ -4114,7 +4114,7 @@
|
|
|
4114
4114
|
class Container extends SvelteElement {
|
|
4115
4115
|
constructor(options) {
|
|
4116
4116
|
super();
|
|
4117
|
-
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title
|
|
4117
|
+
this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family);font-size:var(--fs-base)}.goa-container{margin-bottom:1rem;box-sizing:border-box}.goa-container *{box-sizing:border-box}header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:var(--fs-base);border-width:1px;border-style:solid;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.content{border-bottom:1px solid var(--color-gray-200);border-left:1px solid var(--color-gray-200);border-right:1px solid var(--color-gray-200);border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.goa-container--non-interactive.colored .content{border-color:var(--color-gray-200);background-color:var(--color-gray-100)}.goa-container--important.colored .content{border-color:var(--goa-color-status-warning);background-color:var(--goa-color-status-warning-50)}.goa-container--error.colored .content{border-color:var(--goa-color-status-emergency);background-color:var(--goa-color-status-emergency-50)}.goa-container--success.colored .content{border-color:var(--goa-color-status-success);background-color:var(--goa-color-status-success-50)}.goa-container--info.colored .content{border-color:var(--goa-color-status-info);background-color:var(--goa-color-status-info-50)}.title,.actions{padding:0.5rem 0}.padding--relaxed header{padding:0 1.5rem}.padding--relaxed .content{padding:1.5rem}.padding--compact header,.padding--compact .content{padding:0 1rem}.padding--compact header{padding:0 1rem}.padding--compact .content{padding:1rem}@media screen and (max-width: 480px){.padding--relaxed header{padding:0 1rem}.padding--relaxed .content{padding:1rem}}.goa-container--non-interactive header{background-color:var(--color-gray-100);border-color:var(--color-gray-200);color:var(--color-black)}.goa-container--interactive header{background-color:var(--goa-color-brand);border-color:var(--goa-color-brand);color:var(--color-white)}.goa-container--info header{background-color:var(--goa-color-status-info);border-color:var(--goa-color-status-info);color:var(--color-white)}.goa-container--error header{background-color:var(--goa-color-status-emergency);border-color:var(--goa-color-status-emergency);color:var(--color-white)}.goa-container--success header{background-color:var(--goa-color-status-success);border-color:var(--goa-color-status-success);color:var(--color-white)}.goa-container--important header{background-color:var(--goa-color-status-warning);border-color:var(--goa-color-status-warning);color:var(--color-white)}.heading--large{padding:0.5rem 1.5rem;max-height:3rem;min-height:1rem}.heading--large .title{line-height:2rem}.heading--small{height:0.5rem}.heading--none{display:none}.heading--none~.content{border-top:1px solid var(--color-gray-200);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.heading--small .title,.heading--small .actions{display:none}.actions{display:flex;align-items:center}</style>`;
|
|
4118
4118
|
init(this, {
|
|
4119
4119
|
target: this.shadowRoot,
|
|
4120
4120
|
props: attribute_to_object(this.attributes),
|
|
@@ -14293,8 +14293,7 @@
|
|
|
14293
14293
|
padding = _a.padding,
|
|
14294
14294
|
children = _a.children,
|
|
14295
14295
|
actions = _a.actions,
|
|
14296
|
-
|
|
14297
|
-
variant = _c === void 0 ? 'default' : _c;
|
|
14296
|
+
variant = _a.variant;
|
|
14298
14297
|
return jsxRuntime.jsxs("goa-container", __assign({
|
|
14299
14298
|
variant: variant,
|
|
14300
14299
|
padding: padding,
|