@equinor/cpl-feature-flag-react 0.0.1 → 1.0.0

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.
Files changed (3) hide show
  1. package/dist/index.js +14 -15
  2. package/dist/index.mjs +15 -16
  3. package/package.json +7 -5
package/dist/index.js CHANGED
@@ -154,11 +154,13 @@ function buildReducer(storage, storageKey) {
154
154
 
155
155
  // src/components/buildDevPanel.tsx
156
156
  var import_eds_core_react2 = require("@equinor/eds-core-react");
157
+ var import_eds_icons = require("@equinor/eds-icons");
157
158
  var import_react3 = require("react");
158
159
  var import_styled_components2 = __toESM(require("styled-components"));
159
160
 
160
161
  // src/components/FeatureFlagItem.tsx
161
162
  var import_eds_core_react = require("@equinor/eds-core-react");
163
+ var import_eds_tokens = require("@equinor/eds-tokens");
162
164
  var import_react2 = require("react");
163
165
  var import_styled_components = __toESM(require("styled-components"));
164
166
  var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -179,6 +181,9 @@ function FeatureFlagItem({
179
181
  }
180
182
  var StyledSwitch = (0, import_styled_components.default)(import_eds_core_react.Switch)`
181
183
  gap: 4px;
184
+ [class^='Switch__Label'] {
185
+ color: ${import_eds_tokens.tokens.colors.text.static_icons__default.rgba};
186
+ }
182
187
  `;
183
188
 
184
189
  // src/components/buildDevPanel.tsx
@@ -206,17 +211,21 @@ function DevPanelPure({
206
211
  return null;
207
212
  }
208
213
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_eds_core_react2.EdsProvider, { density: "compact", children: [
209
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FixedWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
214
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
210
215
  import_eds_core_react2.Button,
211
216
  {
212
217
  "aria-haspopup": true,
213
- color: "secondary",
218
+ variant: "ghost",
214
219
  "aria-expanded": isOpen,
215
220
  ref: buttonRef,
216
221
  onClick: handleToggle,
217
- children: "DEV PANEL"
222
+ style: { color: "#3d3d3d" },
223
+ children: [
224
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react2.Icon, { data: import_eds_icons.arrow_drop_down }),
225
+ "DEV PANEL"
226
+ ]
218
227
  }
219
- ) }),
228
+ ),
220
229
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_eds_core_react2.Popover, { open: isOpen, anchorEl: buttonRef.current, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledPopoverContent, { children: [
221
230
  featureFlagKeys.map((featureFlagKey) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
222
231
  FeatureFlagItem,
@@ -244,20 +253,10 @@ function DevPanelPure({
244
253
  ] }) });
245
254
  }
246
255
  var StyledPopoverContent = (0, import_styled_components2.default)(import_eds_core_react2.Popover.Content)`
256
+ background-color: var(--cpl-ui-background-temporary-nav);
247
257
  display: flex;
248
258
  flex-direction: column;
249
259
  `;
250
- var FixedWrapper = import_styled_components2.default.div`
251
- position: fixed;
252
- bottom: 0;
253
- left: 0;
254
- padding: 8px;
255
- width: 100%;
256
- z-index: 1;
257
-
258
- display: flex;
259
- justify-content: center;
260
- `;
261
260
 
262
261
  // src/utils.ts
263
262
  function isValidEnvironment(validEnvironments, environmentToValidate) {
package/dist/index.mjs CHANGED
@@ -120,12 +120,14 @@ function buildReducer(storage, storageKey) {
120
120
  }
121
121
 
122
122
  // src/components/buildDevPanel.tsx
123
- import { Button, EdsProvider, Popover } from "@equinor/eds-core-react";
123
+ import { Button, EdsProvider, Icon, Popover } from "@equinor/eds-core-react";
124
+ import { arrow_drop_down } from "@equinor/eds-icons";
124
125
  import { useCallback as useCallback2, useMemo, useRef, useState } from "react";
125
126
  import styled2 from "styled-components";
126
127
 
127
128
  // src/components/FeatureFlagItem.tsx
128
129
  import { Switch } from "@equinor/eds-core-react";
130
+ import { tokens } from "@equinor/eds-tokens";
129
131
  import { useCallback } from "react";
130
132
  import styled from "styled-components";
131
133
  import { jsx as jsx2 } from "react/jsx-runtime";
@@ -146,6 +148,9 @@ function FeatureFlagItem({
146
148
  }
147
149
  var StyledSwitch = styled(Switch)`
148
150
  gap: 4px;
151
+ [class^='Switch__Label'] {
152
+ color: ${tokens.colors.text.static_icons__default.rgba};
153
+ }
149
154
  `;
150
155
 
151
156
  // src/components/buildDevPanel.tsx
@@ -173,17 +178,21 @@ function DevPanelPure({
173
178
  return null;
174
179
  }
175
180
  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsxs(EdsProvider, { density: "compact", children: [
176
- /* @__PURE__ */ jsx3(FixedWrapper, { children: /* @__PURE__ */ jsx3(
181
+ /* @__PURE__ */ jsxs(
177
182
  Button,
178
183
  {
179
184
  "aria-haspopup": true,
180
- color: "secondary",
185
+ variant: "ghost",
181
186
  "aria-expanded": isOpen,
182
187
  ref: buttonRef,
183
188
  onClick: handleToggle,
184
- children: "DEV PANEL"
189
+ style: { color: "#3d3d3d" },
190
+ children: [
191
+ /* @__PURE__ */ jsx3(Icon, { data: arrow_drop_down }),
192
+ "DEV PANEL"
193
+ ]
185
194
  }
186
- ) }),
195
+ ),
187
196
  /* @__PURE__ */ jsx3(Popover, { open: isOpen, anchorEl: buttonRef.current, onClose: handleClose, children: /* @__PURE__ */ jsxs(StyledPopoverContent, { children: [
188
197
  featureFlagKeys.map((featureFlagKey) => /* @__PURE__ */ jsx3(
189
198
  FeatureFlagItem,
@@ -211,20 +220,10 @@ function DevPanelPure({
211
220
  ] }) });
212
221
  }
213
222
  var StyledPopoverContent = styled2(Popover.Content)`
223
+ background-color: var(--cpl-ui-background-temporary-nav);
214
224
  display: flex;
215
225
  flex-direction: column;
216
226
  `;
217
- var FixedWrapper = styled2.div`
218
- position: fixed;
219
- bottom: 0;
220
- left: 0;
221
- padding: 8px;
222
- width: 100%;
223
- z-index: 1;
224
-
225
- display: flex;
226
- justify-content: center;
227
- `;
228
227
 
229
228
  // src/utils.ts
230
229
  function isValidEnvironment(validEnvironments, environmentToValidate) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/cpl-feature-flag-react",
3
- "version": "0.0.1",
3
+ "version": "1.0.0",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -8,11 +8,9 @@
8
8
  "files": [
9
9
  "dist/**"
10
10
  ],
11
- "dependencies": {},
12
11
  "devDependencies": {
13
12
  "@equinor/eds-core-react": "^0.42.5",
14
- "@storybook/react": "^8.6.14",
15
- "@storybook/test": "^8.6.14",
13
+ "@storybook/react": "^9.1.1",
16
14
  "@types/react": "^18.3.18",
17
15
  "@types/react-dom": "^18.3.5",
18
16
  "@types/styled-components": "^5.1.34",
@@ -21,7 +19,7 @@
21
19
  "react-dom": "^18.2.0",
22
20
  "styled-components": "^6.1.14",
23
21
  "tsup": "^8.3.6",
24
- "@equinor/cpl-eslint-config": "0.0.8",
22
+ "@equinor/cpl-eslint-config": "0.0.9",
25
23
  "@equinor/cpl-typescript-config": "0.0.2"
26
24
  },
27
25
  "peerDependencies": {
@@ -33,6 +31,10 @@
33
31
  "publishConfig": {
34
32
  "access": "public"
35
33
  },
34
+ "dependencies": {
35
+ "@equinor/eds-icons": "^0.21.0",
36
+ "@equinor/eds-tokens": "^0.9.2"
37
+ },
36
38
  "scripts": {
37
39
  "build": "tsup src/index.ts --format esm,cjs --dts --external react",
38
40
  "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",